React生命周期函数

React生命周期函数

第一阶段：装载阶段3
constructor()
render()
componentDidMount()
第二阶段：更新阶段2
shouldComponentUpdate()
render()
componentDidUpdate()
第三阶段：卸载阶段1
componentWillUnmount()

constructor生命周期：

(1)当react组件实例化时，是第一个运行的生命周期；
(2)在这个生命周期中，不能使用this.setState()；
(3)在这个生命周期中，不能使用副作用(调接口、dom操作、定时器、长连接等)；
(4)不能把props和state交叉赋值；

componentDidMount生命周期：

(1)相当于是vue中的mounted；
(2)它表示DOM结构在浏览器中渲染已完成；
(3)在这里可以使用任何的副作用；

shouldComponentUpdate(nextProps,nextState)生命周期：

(1)相当于一个开关，如果返回true则更新机制正常执行，如果为false则更新机制停止；
(2)在vue中是没有的；
(3)存在的意义：可以用于性能优化，但是不常用，最新的解决方案是使用##PureComponent；
(4)理论上，这个生命周期的作用，用于精细地控制声明式变量的更新问题，如果变化的声明式变量参与了视图渲染则返回true，如果被变化的声明式变量没有直接或间接参与视图渲染，则返回false；

componentDidUpdate生命周期：

(1)相当于vue中的updated()；
(2)它表示DOM结构渲染更新已完成，只发生在更新阶段；
(3)在这里，可以执行大多数的副作用，但是不建议；
(4)在这里，可以使用this.setState()，但是要有终止条件判断。

componentWillUnmount生命周期：

(1)一般在这里清除定时器、长连接等其他占用内存的构造器；

render生命周期：

(1)render是类组件中唯一必须有的生命周期，同时必须有return(return 返回的jsx默认只能是单一根节点，但是在fragment的语法支持下，可以返回多个兄弟节点)；
(2)Fragment碎片写法: <React.Fragment></React.Fragment> 简写成<></>；
(3)return之前，可以做任意的业务逻辑，但是不能使用this.setState()，会造成死循环；
(4)render()在装载阶段和更新阶段都会运行；
(5)当render方法返回null的时候，不会影响生命周期函数的正常执行。

Q.E.D.