react学习之旅十：生命周期函数

一、认识React生命周期函数

生命周期函数：在某一时刻组件会自动调用执行的函数。

React生命周期的四个阶段：初始化阶段、虚拟DOM挂载阶段、更新阶段、DOM卸载阶段。

初始化阶段：

constructor：严格上来说属于ES6语法，并不是React独有的生命周期，但是可以当作React的初始阶段。

挂载阶段：

componentWillMount：DOM挂载之前执行。

render：挂载时执行。状态state或属性props发生改变时就会重新渲染。

componentDidMount：DOM挂载后执行。

更新阶段：

componentWillReceiveProps：只有props更新时执行。顶层组件不执行该函数。组件第一次存在于DOM中，该函数不会被执行，只有组件已经存在于DOM中，才会执行。

props和state改变时都会触发的生命周期函数：

shouldComponentUpdate：包含nextProps和nextState两个参数。组件更新前自动执行，在render重新渲染前执行。返回bool类型的值，如果返回false，将不会继续执行render函数，也即组件不会继续更新。在优化组件性能方面有一定作用。

componentWillUpdate：在shouldComponentUpdate之后执行，如果shouldComponentUpdate返回false，它也将不执行。

render：更新时执行。其他的生命周期函数都可以缺省，但是render函数是必须要写的，否则会报错。

componentDidUpdate：组件更新完毕之后，即渲染完成虚拟DOM之后执行。

卸载阶段：

componentWillUnmount：组件将被删除时执行。

 

二、React生命周期函数的应用

利用生命周期函数可以改善组件的性能。

之前的小姐姐组件存在一定的性能问题，通过之前安装的React Developer Tools插件我们可以清楚地看到，当父组件渲染时，子组件也会跟着渲染。一旦这样的问题累积起来，就会造成页面的卡顿。

（F12检查元素，选择Components，找到齿轮按钮并勾选高亮显示即可查看效果。当组件渲染时会高亮显示。）

优化小姐姐组件：

为XiaojiejieItem组件添加生命周期函数shouldComponentUpdate，当它的数据发生变化时才去重新渲染。

shouldComponentUpdate(nextProps,nextState){
    if(nextProps.content !== this.props.content)
        return true;
    else    
        return false;
}