React生命周期简明宝典

介绍

React的生命周期是咱们掌握React工做过程所必须掌握的知识，同时也是部分公司的面试考点

概要

React严格定义了组件的生命周期，其主要经历了以下三个过程

• 装载过程(Mount): 组件第一次在DOM树中渲染的过程
• 更新过程(Update): 组件从新渲染的过程
• 卸载过程(Unmount): 组件从DOM中删除的过程

装载过程

组件第一次被渲染的时候，依次调用的函数为：

• constructor
• getInitialState
• getDefaultProps
• componentWillMount
• render
• componentDidMount

1. constructor

ES6中每一个类的构造函数，要建立一个组件的实例就要调用相应的构造函数。 可是并非每一个组件都要定义本身的构造函数，好比无状态的React组件。一个组件调用构造函数，每每是为了两个目的：

• 初始化state
• 绑定成员函数的this环境

getInitialState和getDefaultProps

getInitialState：该函数返回值用来初始化state getDefaultProps: 该函数返回值用来初始化props

这二者只有用React.createClass方法创造的组件类才会发生做用，而且React.createClass已经被Fb官方废弃，因此这里不细讲了

2. componentWillMount

这个函数没什么存在感，由于在这个时候没有任何渲染出来的结果，调用setState修改状态也不会触发从新渲染，而且在这里作的事情彻底能够提早到constructor中去作

3. render

能够说React组件中最重要的函数，由于React组件的父类React.Component类对除render以外的生命周期函数都有默认实现

render并不作渲染工做，只是返回一个JSX描述的结构，最终由React库根据返回对象决定如何渲染

render应该是一个纯函数，彻底根据state和props来决定返回结果，而不产生反作用，因此render中调用setState是错的，由于纯函数不该该引发状态的改变

4. componentDidMount

componentDidMount并非在render调用后当即调用，其调用的时候render返回的JSX已经渲染了

componentWillMount能够在服务端和浏览器端调用，可是componentDidMount只能在浏览器端调用(由于"装载"过程是不可能在服务端完成的)

异步请求数据通常都在该函数内进行。

更新过程

更新过程会依次调用如下生命周期函数：

• componentWillReceiveProps
• shouldComponentUpdate
• componentWillUpdate
• render
• componentDidUpdate

更新过程并不老是执行全部函数

1. componentWillReceiveProps

只要是父组件的render函数被调用，在render里渲染的子组件就会经历更新过程，无论父组件传递给子组件的props有没有改变，都会触发componentWillReceiveProps。

注意经过setState触发的更新过程不会调用这个函数，否则岂不是死循环了?

2. shouldComponentUpdate

应该是除了render以外最重要的函数了。它决定了一个组件何时需不须要渲染。 render和shouldComponentUpdate是React中惟二须要有返回值的函数，shouldComponentUpdate返回一个布尔值，告诉React是否须要继续更新，若为true则继续，为false则中止更新，不会触发以后的从新渲染。

3. componentWillUpdate

即将render时执行，初始化render时不执行。在这里一样不能setState， 这个函数调用以后，就会把nextProps和nextState分别设置到rops和state中，紧接着调用render

4. render

同上

5. componentDidUpdate

组件更新完成后执行，初始化render时不执行

卸载过程

卸载过程只有一个函数componentWillUnmount，当react组件要从DOM树上删除前，该函数会被调用，因此这个函数适合作一些清理工做。

eg: 在componentDidMount中用非react方法建立的DOM元素，若是不处理可能会发生内存泄漏，所以能够在该函数中将其清理干净

总结

React的生命周期函数并无想象中的那么复杂

参考于《深刻理解React》