要讲React的生命周期的话，网上讲的已经很过了，不过大多数是讲react单个组件的生命周期，理论上组件本质是状态，生命周期大致分为三个阶段，大致流程如下：
一、初始化阶段
getDefaultProps：获取实例的默认属性（即使没有生成实例，组件的第一个实例被初始化createClass的时候调用，只调用一次）
getInitialState：获取每个实例的初始化状态（每个实例自己维护）
componentWillMount：组件即将被装载、渲染到页面上，即组件挂载之前调用一次，如果在这个函数中调用setState，本次的render函数可以看到更新后的state，并且只渲染一次 render:组件在这里生成虚拟的DOM节点（只能访问this.props和this.state,只有一个顶层组件，render返回值只能是一个组件，不允许修改状态和DOM输出）
componentDidMount：在组件挂载之后调用一次，这个时候子组件也都挂载好了，可以在这里使用refs。组件真正在被装载之后可以修改DOM
二、运行中状态
componentWillReceiveProps（nextProps）：当组件props改变的时候，组件将要接收到新的属性的时候调用。props是父组件传递给子组件的，父组件发生render的时候子组件就会调用这个方法，不管props有没有更新，也不管父子组件之间有没有数据交换。
shouldComponentUpdate（nextProps，nextState）：当组件数据（props）或者状态（state）改变的时候调用，组件挂载之后，每次调用setState后都会调用shouldComponentUpdate判断是否需要重新渲染组件。默认返回true，需要重新render。在比较复杂的应用里，有一些数据的改变并不影响界面显示，可以在这里做判断，优化渲染效率。
componentWillUpdate（nextProps，nextState）:这个是shouldComponentUpdate方法返回true的时候或者调用forceUpdate之后调用。这时候不能修改属性和状态 render：只能访问this.props和this.state,只有一个顶层组件，render返回值只能是一个组件，不允许修改状态和DOM输出
componentDidUpdate：除了首次render之后调用componentDidMount，其他render结束之后都是调用componentDidUpdate
三、销毁阶段
componentWillUnmount：开发者需要来销毁（组件真正删除之前调用，比如销毁计时器和事件监听器）
下面是从官网上找到的一张流程图，把上面的步骤描述的非常详细了。
对于一个工程来说，一般是多个组件组成的组件树，因此弄清楚组件嵌套在一起的组件树的生命周期，无论是对于项目优化还是对于项目的运行过程的把控都是很重要的。下面研究一下，一个示例
//父组件
class Parent extends PureComponent {
constructor(props) {
super(props);
console.log('Parent constructor');
}
componentWillMount() {
console.log('Parent componentWillMount');
}
render() {
console.log('RootContainer render');
return (
<div className="root">
<h3>This is Parent</h3>
<Child/>
</div>
);
}
componentDidMount() {
console.log('Parent componentDidMount');
}
componentWillUnmount() {
console.log('Parent componentWillUnmount');
}
componentWillReceiveProps(nextProps) {
console.log('Parent componentWillReceiveProps(nextProps)');
}
componentWillUpdate(nextProps, nextState) {
console.log('Parent componentWillUpdate(nextProps, nextState)');
}
shouldComponentUpdate(nextProps, nextState) {
console.log('Parent shouldComponentUpdate(nextProps, nextState)');
return true;
}
componentDidUpdate(prevProps, prevState) {
console.log('Parent componentDidUpdate(prevProps, prevState)');
}
}
//子组件
class Child extends PureComponent {
constructor(props) {
super(props);
console.log('Child constructor');
}
componentWillMount() {
console.log('Child componentWillMount');
}
render() {
console.log('Child render');
return (
<div className="child">
<h4>I am a Child</h4>
</div>
);
}
componentDidMount() {
console.log('Child componentDidMount');
}
componentWillUnmount() {
console.log('Child componentWillUnmount');
}
componentWillReceiveProps(nextProps) {
console.log('Child componentWillReceiveProps(nextProps)');
}
shouldComponentUpdate(nextProps, nextState) {
console.log('ChildView shouldComponentUpdate(nextProps, nextState)');
return true;
}
componentWillUpdate(nextProps, nextState) {
console.log('Child componentWillUpdate(nextProps, nextState)');
}
componentDidUpdate(prevProps, prevState) {
console.log('Child componetDidUpdate(prevProps, prevState)');
}
}
运行后结果如下：
Parent constructor
Parent componentWillMount
Parent render
Child constructor
Child componentWillMount
Child render
Child componentDidMount
Parent componentDidMount
此时可以分析出，当父组建 render 时遇到子组件，然后进入子组件的生命周期，当执行完子组件生命周期中的componentDidMount 时会回到父组建继续执行父组建未完成的生命周期。
由上面父子嵌套组件的生命周期流程，可以推断继续验证多级组件嵌套的流程，
网友评论