react生命周期函数

组件生命周期分为三部分

组件创建阶段：组件生命周期函数一辈子只执行一次

· componentWillMount：组件将要被挂载，此时还没有开始渲染虚拟 DOM（现在已经更名为UNSAFE_componentWillMount，相对于 Vue 中的 created）

· render：第一次开始渲染真正的虚拟 DOM，当 render 执行完，内存中就有完整的虚拟 DOM 了

· componentDidMount：组件完成挂载，此时，组件已经显示到页面上了，当这个方法执行完，组件就都进入了运行中的状态（相对于 Vue 中的mounted）

组件运行阶段：根据组件 state 跟 props 的改变，有选择性的触发0次或者多次

· componentWillReceiveProps：组件将要接收新属性，此时，只要这个方法被触发，就证明父组件为当前子组件传递了新的属性值（首次并不会触发函数）

· shouldComponentUpdate：组件是否需要被更新，此时，组件尚未被更新，但是，state 和 props 肯定是最新的

· componentWillUpdate：组件将要被更新，此时，尚未开始更新，内存中的虚拟 DOM 树还是旧的，页面上的 DOM 树也是旧的

· componentDidUpdate：此时页面又被重新渲染了， state和虚拟 DOM和页面已经完成保持同步

· render：此时，又要重新根据最新的 state 和 props 重新渲染一颗内存中的虚拟 DOM 树，当 render 调用完毕，内存中的旧 DOM 树，已经被新 DOM 树替换了，此时页面还是旧的

组件销毁阶段：一辈子只执行一次

componentWillUnmount：组件将要被卸载，此时组件还可以正常使用

render函数

当state或者props发生改变的时候，render就会被重新执行

constructor函数

当组件创建的时候，constructor就会被自动的调用，但是constructor并不是react独有的，是es6中自带的，所以不把constructor归类到react的生命周期中

总结

组件挂载生命周期（Mounting）

componentWillMount() 在组件挂载到页面的时候执行

render() 把组件渲染到页面中

componentDidMount() 组件挂载到页面后执行

更新生命周期(updating)

组件更新分为两种

1. props发生变化

componentWillReceiveProps()只有在组件被传递了props，才会被触发

当一个组件从父组件接收了props，只要父组件的render函数被重新执行，子组件的componentWillReceiveProps就会被执行

1. state发生变化

props和state发生变化都会执行的生命周期函数

1. shouldComponentUpate() 需要返回boolean，返回false后面的生命周期函数就不会被执行了了

2. componentWillUpdate()组件被更新之前执行，在shouldComponentUpdate之后执行，如果shouldComponentUpdate返回false，就不会被执行

3. render()函数

4. componentDidUpdate()组件更新完成后被执行

shouldComponentUpate优化

shouldComponentUpate(nextProps,nextSate)接收两个参数

nextProps变化后的props

nextSate变化后的state

例如一个子组件接收了一个数组，只有在props发生了变化子组件才会触发render函数，判断当前的props与nextProps对比，如果一直就说明props没有发声变化，不一致就触发render函数重新渲染页面

shouldComponentUpdate(nextProps, nextState) {
        console.log(nextProps, nextState)
        if (nextProps.list.length == this.props.list.length) {
            return false;
        } else {
            return true;
        }

    }

props与state与render之间的关系

当组件的state或者props发生变化，render函数就会重新执行

setState为什么是异步函数？

因为虚拟dom在state或者props发生变化的时候，虚拟dom会发生比对，假设调用了三次setState,react会发生三次虚拟dom比对，如果三次setState间隔时间非常小，react会把三次setState合并为一次setState，只发生一次对比，setState是异步函数，本质是为了提升react的底层性能