React的生命周期

Posted 2020-10-25 ccclarity

　　React的生命周期主要分为三段，mount（挂载）、update（更新）、unmount（卸载）。

一、mount，即挂载阶段，第一次让组件出现在页面中的过程，React会将render的返回值插入到页面中，这个过程会暴露以下几个钩子（hook）：

1. constructor()       // 初始化props和state
2. componentWillMount()    // 将要被插入
3. render()    // 将return的内容插入到页面里
4. componentDidMount()   // 插入完成后的动作

二、update，即更新阶段，如果数据有任何变动就会来这一阶段，这个过程有5个钩子：

　　componentWillReceiveProps( nextprops )   // 接受需要更新的props

　　shouldComponentUpdate( nextProps, nextState )   // 请问要不要更新组件 true/false

　　componentWillUpdate()  // 准备更新组件啦

　　render() // 更新

　　componentDidUpdate()   // 更新完成

三、unmount，即卸载过程，当一个组件要从页面移除时，会进入这个过程，其中有一个钩子：

　　componentWillUnmount()    // 要卸载啦

 

一般我们只在这几个钩子里setState：

componentWillMount()

componentDidMount()

componentWillReceiveProps()