React多重组件详细生命周期

目标

React中内部组件生命周期的运行方式。

生命周期

类调用:
此过程仅在类创建时被一次，即无论创建多少个ReactElement，此过程均只会执行一次

• getDefaultProps

实例化:
此过程仅执行一次，执行完毕后，React组件真正被渲染到DOM中
期间执行生命周期函数如下：

• getInitialState

• componentWillMount

• render

• componentDidMount

变更

此过程会在this.state或this.props变更时执行
期间执行生命周期函数如下：

this.state变更

• shouldComponentUpdate

• componentWillUpdate

• render

• componentDidUpdate

this.props变更

• componentWillReceiveProps

• shouldComponentUpdate

• componentWillUpdate

• render

• componentDidUpdate

卸载
此过程在组件销毁前调用一次期间执行生命周期函数如下：

• componentWillUnmount

整个生命周期所涉及的方法如图所示：

测试多组件生命周期转换

实例

<Super>
    <Sub_1 />
    <Sub_2 />
</Super>

页面加载后：

更新期

卸载期

原文来自：http://www.cnblogs.com/hhhyaa...