《React与Redux开发实例精解》读书笔记

时间：2024-06-18 23:06:14

第五章 JSX语法

  • class属性改为className for属性改为htmlFor
  • jsx中javascript表达式必须要有返回值，使用三元操作符
  • 所有的标签必须闭合 input img等
  • react声明组件时，组件名称第一个字母必须大写
  • 解析html代码 dangerouslySetInnerHTML={{ __html:htmlString }}
  • jsx中内联样式通过style属性来定义，驼峰命名法

第六章 React的数据载体：state props与context

state称为内部状态或局部状态,

props与context则用于在组件间传递数据，props仅支持逐层传递，而context则能够跨级传递，只要在一个组件中定义了context，这个组件里面的子组件不管跨多少级都可以访问到context中的数据，react-redux的provider组件就使用了context来传递store

第七章 reactElement与组件实例

组件是一个函数或类，它决定了如何把数据变为视图

ReactElement只是一个普通的对象，它描述了组件实例或DOM节点

组件实例是组件类的实例化对象

生命周期

  1. constructor()

    执行时间：组件被加载前最先调用，并且仅调用一次

    作用：定义状态机变量

    注意：第一个语句必须是super（props）

  2. componentWillMount()

    执行时间：组件初始渲染（render()被调用前）前调用，并且仅调用一次

    作用：如果在这个函数中调用setState改变某些状态机，react会等待setState完成后再渲染 组件

    注意：子组件也有componentWillMount函数，在父组件的该函数调用后再被调用

  3. render()

    执行时间：componentWillMount之后，componentDidMount之前，

    作用：渲染挂载组件

    触发条件：（1）初始化加载页面（2）状态机改变setState ( 3 ) 接收到新的props（父组件更新）

    注意：组件所必不可少的核心函数；不能在该函数中修改状态机state

  4. componentDidMount()

    执行时间：render之后被调用，并且仅调用一次

    作用：渲染挂载组件；可以使用refs（备注：React支持一个特殊的属性，你可以将这个属性加在任何通过render()返回的组件中。这也就是说对render()返回的组件进行一个标记，可以方便的定位的这个组件实例。）

    注意：子组件也有该函数，在父组件的该函数调用前被调用；如果在该函数中修改某些状态机state，会重新渲染render组件，所以有些组件为减少渲染次数，可以将某些修改状态机的操作放在componentWillMount函数中；

    如果需要在程序启动显示初始化页面后从网路获取数据，可以将网络请求代码放在该函数中

  5. componentWillReceiveProps(nextProps)

    执行时间：组件渲染后，当组件接收到新的props时被调用；这个函数接收一个object参数（新的props）；props是父组件传递给子组件的。父组件发生render的时候子组件就会调用

    作用：渲染挂载组件；可以使用refs（备注：React支持一个特殊的属性，你可以将这个属性加在任何通过render()返回的组件中。这也就是说对render()返回的组件进行一个标记，可以方便的定位的这个组件实例。）

    注意：react初次渲染时，该函数并不会被触发，因此有时该函数需要和componentWillMount或componentDidMount组合使用;使用该函数一定要加nextProps参数

  6. shouldComponentUpdate(nextProps, nextState)

    执行时间：组件挂载后（即执行完render），接收到新的state或props时被调用，即每次执行setState都会执行该函数，来判断是否重新render组件，默认返回true；接收两个参数：第一个是心的props，第二个是新的state。

    作用：如果有些变化不需要重新render组件，可以在该函数中阻拦

    注意：该方法在初始化渲染的时候不会调用，在使用 forceUpdate 方法的时候也不会

  7. componentWillUpdate()

    执行时间：在接收到新的props 或者 state，重新渲染之前立刻调用，在初始化渲染的时候该方法不会被调用

    作用：为即将发生的重新渲染做一些准备工作

    注意：不能再该函数中通过this.setstate再次改变状态机，如果需要，则在componentWillReceiveProps函数中改变

  8. componentDidUpdate()

    执行时间：重新渲染后调用，在初始化渲染的时候该方法不会被调用

    作用：使用该方法可以在组件更新之后操作DOM 元素

  9. componentWillUnmount()

    执行时间：组件被卸载前调用，

    作用：在该方法中执行任何必要的清理，比如无效的定时器，或者清除在 componentDidMount 中创建的 DOM 元素。

React组件中this
  • constructor(),render(),componentDidMount(),componentDidUpdate()等其他生命周期函数中的this都是组件实例
  • 其他地方的this都与当前上下文有关，因此在render输出的reactElemnt中调用其他自定义函数需要绑定this,当然也可以使用箭头函数

第八章 初识Redux

action是一个普通对象，表示将要执行的动作，例如{type:'increment'}

reducer描述了action如何把state转变成下一个state

store是个全局对象，将action和reducer以及stte联系在一起

store有以下职能：

  • 维持应用的state
  • 提供getState()方法获取state
  • 提供dispatch(action)方法更新state
  • 提供subscribe(listener)注册监听器

第九章 action创建函数与ReduxThunk中间件

reduxThunk中间件可以让action创建函数先不返回action对象，而是返回一个函数，通过这个函数延迟dispatch或者只在满足指定条件的情况下dispatch

import {createStore,applyMiddleware} from 'redux';

import thunk from 'redux-thunk';

const store = createStore(counter,applyMiddleware(thunk));

第十一章 使用react-redux链接

在所有组件的顶层使用Provider组件给整个程序提供store

ReactDOM.render(

    <Provider store={store}>

    ...

    </Peovider>,rootEl);

使用connect()将state和action创建函数绑定到组件中

export default connect(

    state=>({counter:state.counter}),//将state.counter传递给组件的counter属性

    ActionCreators//是所有action创建函数的集合，同时为每个action创建函数隐式绑定了dispatch方法，

    //因此可以直接通过props调用这个action创建函数

)(Counter);

容器组件（Container）和展示组件（Components）

展示组件 容器组件
作用 描述如何展现（骨架、样式） 描述如何运行（数据获取、状态更新）
直接使用 Redux 否 是
数据来源 props 监听 Redux state
数据修改 从 props 调用回调函数 向 Redux 派发 actions
调用方式 手动 通常由 React Redux 生成

相关文章