React中的生命周期函数

 

1.getDefaultProps（）

使用React.createClass方式定义组件时会使用getDefaultProps这种方式，对于每个组件类来说，该方法只会调用一次，该组件类的所有后续实例将不会再调用，其返回的对象可以用于设置默认的props值。

注：es6语法中，例如用的是class 组件名 extends React.Component 的话，定义props类型应该用 static propTypes ＝｛｝；设置组件的默认值应该用static defaultProps = {}。

2.getInitialState（）

在组件实例化前被调用一次，返回初始的state值。有状态组件应该实现此函数。对于组件的每个实例来说都会调用，且只调一次，用来初始化每个实例的state，在该方法里可以访问组件的props。每一个React组件都有自己的state，其与props的区别在于 state只存在于组件的内部，而props 在所有实例*享。

注：在使用es6的class语法时是没有这个钩子函数的，页面初始化state和props的设置在 consourctor 函数里面去做。

3.componentWillMount（）

在组件将要被挂载到页面的时刻自动执行（在组件实例化前）。现在已经更名为UNSAFE_componentWillMount，相对于 Vue 中的 created。

第一次挂载页面的时候会被执行，以后组件更新不调用，整个生命周期只调用一次，此时可以修改state。

4.render（）

state 和 props 发生改变的时候 render 函数会被自动的执行。可以做渲染过滤。

注：react最重要的步骤，创建虚拟dom，进行diff算法，更新dom树都在此进行。此时就不能更改state了。

5.componentDidMount（）

组件被挂载到页面之后，自动被执行（组件实例化后）。数据已经装载，据网上流传会引起二次render，实际应用发网络请求（请求数据）

注：该方法被调用时，已经渲染出真实的DOM，可以在该方法中通过 this.getDOMNode() 访问到真实DOM（推荐使用 ReactDOM.findDOMNode()）。

由于组件并不是真实的DOM节点，而是存在于内存之中的虚拟DOM，只有当它插入文档后，才会变成真实的DOM 。有时需要从组件获取真实的 DOM节点，就要用到 ref 属性。

注：由于 this.refs.[refName] 属性获取的是真实的 DOM，所以必须等到虚拟 DOM 插入文档后才能使用，否则会报错。

6.shouldComponentUpdate（）

在组件更新之前会被运行。此时state 和 props 是最新的

shouldComponentUpdate(nextProps, nextState)，react性能优化非常重要的一环。组件接受新的state或者props时调用，我们可以设置在此对比前后两个props和state是否相同，如果相同则返回false阻止更新，因为相同的属性状态一定会生成相同的dom树，这样就不需要创造新的dom树和旧的dom树进行diff算法对比，节省大量性能，尤其是在dom结构复杂的时候。

7.componentWillUpdate（）

在组件更新前被立即调用。但是他在shouldComponent之后被执行，如果shouldCoponent返回true才会被执行，返回false就不会被执行了。

8.componentDidUpdate（）

在组件更新后被立即调用。componentDidUpdate(prevProps,prevState,snapshot)

prevProps：之前的属性

prevState：之前的数据

snapshot：快照

9.componentWillReceiveProps（）

一个组件从父组件接收新的props参数时调用。如果这个组件第一次存在父组件中，不会执行。如果这个组件之前已经存在于父组件中，才会执行。

10.componentWillUnmount（）

组件要被移除的时候立即调用。