React中LifeCycle生命周期详解

如图，可以把组件生命周期大致分为三个阶段：

第一阶段：是组件第一次绘制阶段，如图中的上面虚线框内，在这里完成了组件的加载和初始化；

第二阶段：是组件在运行和交互阶段，如图中左下角虚线框，这个阶段组件可以处理用户交互，或者接收事件更新界面；

第三阶段：是组件卸载消亡的阶段，如图中右下角的虚线框中，这里做一些组件的清理工作。

更新方式（触发render的4条路径）

在react中，触发render的有4条路径。

以下假设shouldComponentUpdate都是按照默认返回true的方式。

1、首次渲染Initial Render

2、调用this.setState （并不是一次setState会触发一次render，React可能会合并操作，再一次性进行render）

3、父组件发生更新（一般就是props发生改变，但是就算props没有改变或者父子组件之间没有数据交换也会触发render）

4、调用this.forceUpdate

下面是我对React组件四条更新路径地总结：

代码如下

class LifeCycle extends React.Component {
    constructor(props) {
        super(props);
        alert("Initial render");
        alert("constructor");
        this.state = {str: "hello"};
    }


    componentWillMount() {
        alert("componentWillMount");
    }


    componentDidMount() {
        alert("componentDidMount");
    }


    componentWillReceiveProps(nextProps) {
        alert("componentWillReceiveProps");
    }


    shouldComponentUpdate() {
        alert("shouldComponentUpdate");
        return true;        // 记得要返回true
    }


    componentWillUpdate() {
        alert("componentWillUpdate");
    }


    componentDidUpdate() {
        alert("componentDidUpdate");
    }


    componentWillUnmount() {
        alert("componentWillUnmount");
    }


    setTheState() {
        let s = "hello";
        if (this.state.str === s) {
            s = "HELLO";
        }
        this.setState({
            str: s
        });
    }


    forceItUpdate() {
        this.forceUpdate();
    }


    render() {
        alert("render");
        return(
            <div>
                <span>{"Props:"}<h2>{parseInt(this.props.num)}</h2></span>
                <br />
                <span>{"State:"}<h2>{this.state.str}</h2></span>
            </div>
        );
    }
}


class Container  extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            num: Math.random() * 100
        };
    }


    propsChange() {
        this.setState({
            num: Math.random() * 100
        });
    }


    setLifeCycleState() {
        this.refs.rLifeCycle.setTheState();
    }


    forceLifeCycleUpdate() {
        this.refs.rLifeCycle.forceItUpdate();
    }


    unmountLifeCycle() {
        // 这里卸载父组件也会导致卸载子组件
        React.unmountComponentAtNode(document.getElementById("container"));
    }


    parentForceUpdate() {
        this.forceUpdate();
    }


    render() {
        return (
            <div>
                <a href="javascript:;" className="weui_btn weui_btn_primary" onClick={this.propsChange.bind(this)}>propsChange</a>
                <a href="javascript:;" className="weui_btn weui_btn_primary" onClick={this.setLifeCycleState.bind(this)}>setState</a>
                <a href="javascript:;" className="weui_btn weui_btn_primary" onClick={this.forceLifeCycleUpdate.bind(this)}>forceUpdate</a>
                <a href="javascript:;" className="weui_btn weui_btn_primary" onClick={this.unmountLifeCycle.bind(this)}>unmount</a>
                <a href="javascript:;" className="weui_btn weui_btn_primary" onClick={this.parentForceUpdate.bind(this)}>parentForceUpdateWithoutChange</a>
                <LifeCycle ref="rLifeCycle" num={this.state.num}></LifeCycle>
            </div>
        );
    }
}


ReactDom.render(
    <Container></Container>,
    document.getElementById('container')

);

参考文档：       https://www.jianshu.com/p/4784216b8194

                        https://www.cnblogs.com/chunlei36/p/6415582.html