React 生命周期初探

概论

什么是生命周期

个人理解的生命周期就是一个对象从开始生成到最后销毁所经历的不同状态，React 生命周期可分为三个阶段 1. 初始化 2.更新 3.销毁

生命周期图解：

1. First Render：这是组件第一次渲染，会在此时设置组件的默认属性及默认状态，并在这里完成组件的加载；
2. Props Change & State Change：这是运行过程中发生交互使得属性或状态发生改变，此阶段组件需要根据交互变化更新页面；
3. Unmount：这是组件的销毁阶段，可以在此阶段清理组件

生命周期分析

初始化

1. getDefaultProps

设置默认属性：props 是组件接收外来参数的一个对象，在组件内部是不允许修改的，该方法返回一个对象，赋值给 this.props 作为当前组件的默认属性。

2. getInitialState

设置默认状态：初始化组件的 state。

3. componentWillMount

组件即将加载时候的函数：可以根据业务需求改变 state 值。

4. render

渲染组件：根据当前的 state 生成虚拟 DOM， 虚拟 DOM 结合到真实 DOM 中。

5. componentDidMount

组件加载完毕时候的函数：实际渲染阶段，将 DOM 插入到 HTML 中。

更新

6. componentWillReceiveProps(nextProps)

组件将要接受新组件：当组件接收到新的 props 时会触发该函数。

7. shouldComponentUpdate(nextProps, nextState)

组件是否更新：通过判断拦截到的新的 props 或 state，来决定是否更新组件，默认为 true。

8. componentWillUpdate(nextProps, nextState)

组件即将更新：如果 shouldComponentUpdate 返回 false 则不会调用。
此时也会调用 render() 进行渲染

9. componentDidUpdate(prevProps, prevState)

组件更新完毕时候运行的函数：如果 shouldComponentUpdate 返回 false 则不会调用。

销毁

10. componentWillUnmount

卸载组件：通常用来处理 DOM 移除，取消事件绑定，销毁定时器等工作。

执行顺序测试

Lifecycle.js

import React from 'react';
import LifecycleChild from './LifecycleChild';
import '../../css/lifecycle/lifecycle.css';

class Lifecycle extends React.Component {

    constructor () {
        super();
        this.state = {
            status: 0
        }
    }

    componentWillMount () {
        console.log('componentWillMount=========' + this.state.status);
    }

    componentDidMount () {
        console.log('componentDidMount=========' + this.state.status);
    }

    componentWillReceiveProps () {
        console.log('componentWillReceiveProps=========' + this.state.status);
    }

    shouldComponentUpdate () {
        console.log('shouldComponentUpdate=========' + this.state.status);
        return true;
    }

    componentWillUpdate () {
        console.log('componentWillUpdate=========' + this.state.status);
    }

    componentDidUpdate () {
        console.log('componentDidUpdate=========' + this.state.status);
    }

    render () {
        console.log('render=========' + this.state.status);
        return (
            <div>
                Lifecycle
                <button onClick={() => this.changeStatus()}>change</button>
                <LifecycleChild state={this.state} />
            </div> 
        )
    }
    
    componentWillUnmount () {
        console.log('componentWillUnmount=========' + this.state.status);
    }

    changeStatus () {
        this.setState({
            status: this.state.status + 1
        })
    }
}

export default Lifecycle;

LifecycleChild.js

import React from 'react';
import '../../css/lifecycle/lifecycle.css';

class LifecycleChild extends React.Component {
    constructor (props) {
        super(props);
        this.state = {
            status: 0,
            fatherStatus: props.state.status
        }
    }

    componentWillMount () {
        console.log('child-componentWillMount========= state: ' + this.state.status + ' props: ' + this.props.state.status);
    }

    componentDidMount () {
        console.log('child-componentDidMount========= state: ' + this.state.status + ' props: ' + this.props.state.status);
    }

    componentWillReceiveProps () {
        console.log('child-componentWillReceiveProps========= state: ' + this.state.status + ' props: ' + this.props.state.status);
    }

    shouldComponentUpdate () {
        console.log('child-shouldComponentUpdate========= state: ' + this.state.status + ' props: ' + this.props.state.status);
        return true;
    }

    componentWillUpdate () {
        console.log('child-componentWillUpdate========= state: ' + this.state.status + ' props: ' + this.props.state.status);
    }

    componentDidUpdate () {
        console.log('child-componentDidUpdate========= state: ' + this.state.status + ' props: ' + this.props.state.status);
    }

    render () {
        console.log('child-render========= state: ' + this.state.status + ' props: ' + this.props.state.status);
        return (
            <div>
                Lifecycle-child
                <button onClick={() => this.changeStatus()}>change</button>
            </div> 
        )
    }
    
    componentWillUnmount () {
        console.log('child-componentWillUnmount========= state: ' + this.state.status + ' props: ' + this.props.state.status);
    }

    changeStatus () {
        this.setState({
            status: this.state.status + 1
        })
    }
}

export default LifecycleChild;

1. 页面加载时

2. 父组件状态改变时

3. 子组件状态改变时

4. 切换路由时

小结

1. 页面初次加载时，执行顺序为：componentWillMount => render => componentDidMount；
2. 当页面状态发生改变时，执行顺序为：shouldComponentUpdate => componentWillUpdate => render => componentDidUpdate；
3. 当父组件状态（即子组件 props）发生改变时，子组件中执行顺序为：componentWillReceiveProps => shouldComponentUpdate => componentWillUpdate => render => componentDidUpdate；
4. 页面加载时，父子组件执行顺序：父组件的 componentWillMount 和 render 先于子组件的 componentWillMount 和 render 执行，而父组件的 componentDidMount 晚于子组件的 componentDidMount 执行；