React组件生命周期（旧）

一、概念

在组件创建、组件属性更新、组件被销毁的过程中，总是伴随着各种各样的函数执行，这些在组件特定时期，被触发执行的函数，统称为组件的生命周期函数。

二、组件生命周期的三个阶段

1、加载阶段（Mounting）：组件初始化时执行，最显著的特点是该阶段的生命周期函数在组件的一辈子中只执行一次
2、更新阶段（Updating）：属性（props）和状态（state）发生变化时执行，根据组件pros和state的改变，有选择性的触发0次或多次
3、卸载阶段（Unmounting）：组件对象销毁时执行，一辈子只执行一次

三、生命周期图

React组件生命周期（旧）.png

四、生命周期三个阶段详解

1、加载阶段（Mounting，涉及6个钩子函数）
（1）constructor()——构造函数，在加载时（创建组件时）调用一次，可以初始化state
（2）getDefaultProps()——设置默认的props，也可以用defaultProps设置组件的默认属性
（3）getInitialState()——初始化state，可以直接在constuctor中定义this state
（4）componentWillMount()——组件加载之前调用，以后组件更新不调用，整个生命周期只调用一次，此时可以修改state，即调用setState，则本次的render函数可以看到更新后的state
（5）render()——react最重要的步骤，创建虚拟DOM，进行diff算法，更新DOM树都在此阶段进行，切忌不要再render里边修改state
（6）componentDidMount()——组件渲染之后调用，只调用一次，此时子组件也挂载好了，可以使用refs

2、更新阶段（Updating，涉及5个钩子函数）
（1）componentWillReceiveProps(nextProps)——组件加载时不调用，组件接收新的props时调用，父组件发生render的时候子组件就会调用（不管props有没有更新，也不管父子组件之间有没有数据交换）
（2）shouldComponentUpdate(nextProps, nextState)——组件接收到新的props或者state时调用，return true就会更新DOM（使用diff算法更新），return false可以阻止更新（不调用render），可以优化渲染效率
（3）componentWillUpdate(nextProps, nextState)——组件加载时不调用，只有在组件将要更新时才调用，此时可以修改state
（4）render()——react最重要的步骤，创建虚拟DOM，进行diff算法，更新DOM树都在此阶段进行
（5）componentDidUpdate()——组件加载时不调用，组件更新完成后调用，除了首次render之后调用componentDidMount()，其他render结束之后都是调用componentDidUpdate()

3、卸载阶段（Unmounting，涉及1个钩子函数）
（1）componentWillUnmount()——组件被卸载时调用，只调用一次，一般在componentDidMount里面注册的事件需要在这里删除

五、react组件更新方式：react中触发render有4种方式

1、首次渲染initial render
2、调用this.setState（但并不是一次setState就会触发一次render，React可能会合并操作，再一次性进行render）
3、父组件发生更新（一般就是props发生改变，但是就算props没有改变或者父子组件之间没有数据交换也会触发render）
4、调用this.forceUpdate

React组件更新的4种方式.png

六、完整例子

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')
);