react组件生命周期

作者: 杨慧莉 | 来源:发表于2017-05-26 20:27 被阅读91次

React概念图
React 组件生命周期
React总结
学习并实现react (4)
react（最近搞了一套react项目的视频全套有需
Notes On React - Two
React 生命周期
006@React组件的生命周期.md
四：React 进阶三（生命周期）
react组件的生命周期

下图详细列述了 React 组件在整个生命周期中所涉及的方法和行为：

react.png

生命周期详解

组件在整个 ReactJS 的生命周期中，主要会经历这4个阶段：创建阶段、实例化阶段、更新阶段、销毁阶段。下面对各个阶段分别进行介绍。

1. 创建阶段

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

2. 实例化阶段
（1）getInitialState：初始化组件的state 的值。其返回值会赋值给组件的 this.state 属性
（2）componentWillMount：根据业务逻辑来对state进行相应的操作。只会在装载之前调用一次，在 render 之前调用
（3）componentDidMount：

对根据虚拟 DOM 结构而生的真实 DOM进行相应的处理。组件内部可以通过 ReactDOM.findDOMNode(this)来获取当前组件的节点，然后就可以像 Web 开发中那样操作里面的DOM元素

只会在装载完成之后调用一次，在 render 之后调用

3. 更新阶段
（1）componentWillReceiveProps：当组件接收到新的 props时，会触发该函数。在改函数中，通常可以调用 this.setState 方法来完成对 state 的修改
（2）shouldComponentUpdate：该方法用来拦截新的 props或 state，然后根据事先设定好的判断逻辑，做出最后要不要更新组件的决定
（3）componentWillUpdate：当上面的方法拦截返回 true 的时候，就可以在该方法中做一些更新之前的操作
（4）componentDidUpdate：该方法在组件的更新已经同步到 DOM 中去后触发，我们常在该方法中做一 DOM 操作

4. 销毁阶段

这个阶段只会触发一个叫 componentWillUnmount 的方法。
当组件需要从 DOM 中移除的时候，我们通常会做一些取消事件绑定、移除虚拟DOM 中对应的组件数据结构、销毁一些无效的定时器等工作。这些事情都可以在这个方法中处理。

调用顺序及次数

getDefaultProps()，调用1次
getInitialState()，调用1次
componentWillMount()，调用1次
render()，调用>=1次
componentDidMount()：仅客户端，调用1次
componentWillReceiveProps(object nextProps)，调用>=0次
ShouldComponentUpdate(object nextProps, object nextState)，调用>=0次
componentWillUpdate(object nextProps, object nextState)，调用>=0次
render()，调用>=1次
componentDidUpdate(object prevProps, object prevState)，调用>=0次
componentWillUnmount()，调用1次