下图详细列述了 React 组件在整个生命周期中所涉及的方法和行为:
生命周期详解
组件在整个 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次
示例代码点击这里
参考资料:
http://www.hangge.com/blog/cache/detail_1473.html#
http://lib.csdn.net/article/reactnative/43548
https://hulufei.gitbooks.io/react-tutorial/component-lifecycle.html
http://pinggod.com/2015/React-%E7%BB%84%E4%BB%B6%E7%9A%84%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F/
https://segmentfault.com/a/1190000005161417