React 生命周期

生命周期方法在class组件中存在

为什么函数组件不能用生命周期函数：是因为没有继承React.Component，而生命周期的方法是由这个类实现的

把函数组件转化为class组件的步骤：

1. 创建同名的ES6 class，继承于React.Component

2. 添加空的render()方法

3. 将函数移动到render方法中

4. 在render中使用this.props代替props

5. 删除剩余的空函数声明

class组件始终用props参数来调用父类的构造函数

挂载：组件第一次渲染到dom中

卸载：清除dom中的组件

生命周期方法：当组件挂载与卸载时去执行的这些方法

执行流程：

1. 当组件传到Render函数时，React会调用组件里的构造函数。

2. React会接着调用组件里的Render方法，展示出组件里的内容，React更新dom匹配组件的输出

3. 当组件的输出插入到dom中后，即组件挂载后，React会调用ComponentDidMount生命周期方法

4. 如果生命周期方法里有setState，state更新后会重新调用render进行渲染页面

5. 当组价被移除时，会调用componentWillUnmount生命周期的方法

 

以上即为官方文档上介绍的由来和使用

下面具体的介绍一下React都要哪些生命周期函数：

1. 挂载前：组件的渲染会先执行defaultProps和propsTypes，然后是constructor和this.state

2. 挂载时触发的函数： componentWillMount，然后进入Render渲染，

3. 挂载完成时触发的函数：componentDidMount，Render渲染后挂载完成，触发此函数

前三步为挂载部分，下面介绍数据更新部分

4. 判断是否要更新数据： shouldComponentWillUpdate，该函数有两个参数，nextProps,nextState;nextProps是父组件传给子组件的值，当没有时会显示为空；nextState为数据更新后的值，比如点击按键改变值时，此时会进行数据更新，会调用改函数，返回true，确认更新

5. 更新时触发的函数：componentWillUpdate ,这之后的过程类似于之前的挂载，执行后会进行render进行渲染

6. 更新结束后调用的函数：componentDidUpdate，render渲染后会调用此函数

7. 组件销毁时触发的函数： componentWillUnmount

8. 组件中改变props传值时触发的函数： componentWillReceiveProps， 当在子组件中改变props的值时触发此函数