react-生命周期

 

首先，看一下一个组件的构造

 constructor参数接受两个参数props,context。如果你想在constructor构造函数内部使用props或context,则需要传入。

只要组件存在constructor,就必要要写super,否则this指向会错误

  

 

React组件提供了生命周期的钩子函数去响应组件不同时刻的状态，组件的生命周期如下:

• 装载过程（Mount），组件第一次在DOM树渲染的过程，在这里完成了组件的加载和初始化；
• 更新过程（Update），当组件被重新渲染的过程。这个阶段组件可以处理用户交互，或者接收事件更新界面；
• 卸载过程（Unmount），组件从DOM树中删除的过程。这里做一些组件的清理工作。

执行这3个过程的调用函数就是声明周期函数。

 

装载过程

该过程会依次调用如下函数：

• constructor():

　　　　ES6类的构造函数（为了初始化state或绑定this）

• getInitialState():

　　　　作用于组件的实例，在实例创建时调用一次，用于初始化每个实例的state（ES5），此时可以访问this.props。

• getDefaultProps():ES5中初始化props。在ES6中使用defaultProps()方法。

　　　　作用于组件类，只调用一次，返回对象用于设置默认的props，对于引用值，会在实例中共享。

• componentWillMount():

　　　　在完成首次渲染（组件被挂载前）之前调用，只执行一次。

• render():渲染组件，创建虚拟DOM，必须实现该方法。该方法具有特殊的规则：

　　　　　　只能通过this.props和this.state访问数据

　　　　　　可以返回null、false或任何React组件

　　　　　　只能出现一个顶级组件（不能返回数组）

　　　　　　不能改变组件的状态

　　　　　　不能修改DOM的输出

• componentDidMount():

　　　　真实的DOM被渲染出来后（组件装载后）调用，在该方法中可通过this.getDOMNode()访问到真实的DOM元素。此时已经生成了真实的DOM节点，可以使用其他类库来操作这个DOM。只执行一次。

 

更新过程

当组件的props或者state改变时就会触发组件的更新过程。

 

【

在react中，触发render的有4条路径。

以下假设shouldComponentUpdate都是按照默认返回true的方式。

1. 首次渲染Initial Render
2. 调用this.setState （并不是一次setState会触发一次render，React可能会合并操作，再一次性进行render）
3. 父组件发生更新（一般就是props发生改变，但是就算props没有改变或者父子组件之间没有数据交换也会触发render）
4. 调用this.forceUpdate

】 

 

更新过程会依次执行如下函数：

• componentWillReceiveProps(nextProps):

　　　　组件接收到新的props时调用，并将其作为参数nextProps使用，此时可以更改组件props及state。

　　　　

 

• shouldComponentUpdate(nextProps,nextState):

　　　　当props改变或state改变时调用，返回boolean。true表示继续执行render方法，fasle表示放弃本次渲染。

　　　　在首次渲染期间或者调用了forceUpdate方法后，该方法不会被调用

　　　　【　　　　

　　　　　　forceUpdate (callback)
　　　　　　默认情况下，当组件的state或props更改时，组件将重新呈现。如果render（）方法依赖于某些其他数据，

　　　　　　可以通过调用forceUpdate（）来告诉React该组件需要重新呈现。

　　　　　　调用forceUpdate（）将导致在组件上调用render（），跳过shouldComponentUpdate（）。

　　　　　　这将触发子组件的正常生命周期方法，包括每个子组件的shouldComponentUpdate（）方法。如果标记更改，则React仍将仅更新DOM。

　　　　　　应该尽量避免使用forceUpdate（），只能从render.（）中的this.props和this.state读取。

　　　　】

 

• componentWillUpdate

　　　　接收到新的props或者state后，进行渲染之前调用，此时不允许更新props或state。

 

• componentDidUpdate

　　　　完成渲染新的props或者state后调用，此时可以访问到新的DOM元素。

 

• render():渲染组件。

 

卸载过程

• componentWillUnmount():

　　　　组件被移除之前被调用，可以用于做一些清理工作，防止内存溢出。在componentDidMount方法中添加的所有任务都需要在该方法中撤销，比如创建的定时器或添加的事件监听器。 

 

 

生命周期的回调函数总结:

 

组件生命周期及渲染顺序

React数据获取为什么一定要在componentDidMount里面调用？