react生命周期

挂载卸载过程

constrctor()

完成数据的初始化，接收参数props和context。需要通过super()传入这两个参数才能使用。

componentWillMount()

组件已经经历了constructor数据初始化后，还未渲染到页面上。一般用于服务端渲染。

componentDidMount()

组件第一次渲染完成，dom节点已创建。此时可以发送ajax请求，得到新数据后setState会进行重新渲染

componentWillUnmount()

进行组件的卸载和数据的销毁。

• 移除组件中的定时器
• 移除组件中的事件监听
• 有时ajax请求未完成，调用此函数就会出现warning。 解决：设置节流阀，当进行此生命周期函数后关闭，而ajax请求需要在节流阀开启时执行。

更新过程

componentWillReceiveProps(nextProps)

在接收父组件更新后的props需要重新渲染时用的较多
接收参数nextProps，通过对比nextProps和this.props,将nextProps的state设为当前组件的state，重新渲染组件

shouldComponentUpdate(nextProps,nextState)

唯一用于控制组件重新渲染的生命周期函数

• 当setState后，state更新，就会导致组件重新渲染，此时return false就会阻止重新渲染
• 当父组件的props改变时，所有子组件就会重新渲染。但并不需要所有子组件都跟着重新渲染，因此需要在子组件的该生命周期函数中判断

componentWillUpdate(nextProps,nextState)

当shouldComponentUpdate返回true后，组件即将重新渲染，会进入此生命周期，同样可以拿到nextProps,nextState

componentDidUpdate(preProps, preState)

组件除了第一次渲染后会进入componentDidmount函数，后面重新渲染之后都会进入此函数，两个参数分别为更新前的props和state

render()

此函数会插入jsx生成的dom结构，react会生成一份虚拟dom树，每一次组件更新时，react就会在此通过diff算法比较新旧dom树的最小区别，生成补丁，重新渲染

react生命周期

原文：https://www.cnblogs.com/ashen1999/p/12821039.html