React生命周期解析

React生命周期主要会经历这4个阶段：创建阶段、实例化阶段、更新阶段、销毁阶段

调用 React.createClass，即创建组件类的时候，会触发getDefaultProps 方法，该方法返回一个对象，然后与父组件指定的props对象合并，最后赋值给 this.props 作为该组件的默认属性，该方法只调用一次

2、实例化阶段

getInitialState：初始化state 的值，返回值会赋给this.state
componentWillMount：操作state，不会触发再次渲染，建议用constructor代替
render：根据 state 的值，生成页面需要的虚拟 DOM 结构
componentDidMount：可以设置state，会触发再次渲染，组件内部可以通过 ReactDOM.findDOMNode(this)来获取当前组件的节点操作DOM

3、更新阶段～～用户操作或者父组件有更新的时候

componentWillReceiveProps(nextProps)：当组件接收到新的props时会触发该函数，通常可以调用this.setState方法来比较this.props和nextProps的执行状态，完成对state的修改
shouldComponentUpdate(nextProps, nextState)：该方法用来拦截新的props或state，然后判断是否更新组件
componentWillUpdate(nextProps, nextState)：更新之前调用
render：根据diff算法，生成需要更新的虚拟DOM数据
componentDidUpdate(prevProps, prevState)：更新之后调用，可以进行DOM 操作
tips：render中最好只是数据和模板的组合，不应该修改state
如果shouldComponentUpdate返回false，componentWillUpdate，render，componentDidUpdate都不会被调用

4、销毁阶段

props

state

递归调用～Will方法先调用，Did方法后调用

父组件的componentWillMount / componentWillUpdate方法一定在子组件的componentWillMount / componentWillUpdate方法之前调用
父组件的componentDidMount / componentDidUpdate方法一定在子组件的 componentDidMount / componentDidUpdate方法之后调用

参考文章推荐：
深入理解react（源码分析） #1
React源码分析3 — React生命周期详解
 React 源码剖析系列－生命周期的管理艺术
 React生命周期的实现
 React.Component
React - 组件的生命周期详解（及各阶段调用的方法）

最后编辑于：2017.12.07 02:55:25

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。