React学习笔记(4)组件生命周期

每个组件都有几个 “生命周期方法” ，您可以重写这些方法，以在过程中的特定时间运行代码。 前缀为 will 的方法在一些事情发生之前被调用，而前缀为 did 的方法在一些事情发生后被调用。

react生命周期图.jpg

class Reactlife extends React.Component {
    // 实例化：首次调用组件时，有以下方法会被调用
    // getDefaultProps
    // 这个方法是用来设置组件默认的 props，组件生命周期只会调用一次。但是只适合
    // React.createClass 直接创建的组件.
    static defaultProps(){

    };

    // getInitialState
    // 设置state初始值，在这个方法中你已经可以访问到 this.props.getInitialState 只适合 React.createClass 使用
    state={
        name: "xxxx",
    };

    // componentWillMount
    // 改方法会在组件首次渲染之前调用，这个是在 render 方法调用前可修改 state 的最后一次机会。这个方法很少用到。
    componentWillMount() {
        alert(2);
    };


    // componentDidMount
    // 这个方法在首次真实的 DOM 渲染后调用（仅此一次）当我们需要访问真实的 DOM 时，这个方法就经常用到
    componentDidMount() {
        alert(3);
    };
// **********************************************************************************************
    // render
    // JSX 通过这里，解析成对应的虚拟 DOM，渲染成最终效果
    render (){
        return (
            <div>
                执行完componentWillMount后，执行render
            </div>
        )
    };


    // 存在期
    // 实例化后，当props或者state发生变化时，下面方法依次被调用：
    // 一般不会用。
    componentWillReceiveProps() {
       //该方法不用关注
        alert(4);
    };

    // shouldComponentUpdate
    // 是否应该更新组件，默认返回 true。当返回 false 时，后期函数就不会调用，组件不会再次渲染
    shouldComponentUpdate() {

        alert(5);
        return true;
    };

    // componentWillUpdate
    // 组件将会更新，state 改变后必调用
    componentWillUpdate() {
        alert(6);
    };

    // render
    // JSX 通过这里，解析成对应的虚拟 DOM，渲染成最终效果
    render (){
        return (
            <div>
                存在期render
            </div>
    )
    };

    // componentDidUpdate
    // 在更新真实的 DOM 成功后调用
    componentDidUpdate() {
        alert(7);
    };

    //销毁期
    // 当组件使用完成，这个组件就必须从DOM中销毁，此时该方法就会被调用
    componentWillUnmount() {
        console.log(8);
    };


}

按照图中生命周期，把相关方法列出来看下执行的顺序。在上面代码中执行结果只会alert 2和3。原因就是在存在期注释下面那句话，实例化后，当props或者state发生变化时，下面方法依次被调用
接下来我们在上面代码中加下改变state的状态的代码。

    updateState = () => {
        this.setState({name: "yyyy"});
    }

    render (){
        return (
            <div>
                <button onClick={this.updateState}>点击按钮，更新state状态</button>
                <div>更新完状态后，继续执行存在期方法</div>
            </div>
        )
    };

这时候会继续执行alert 5,6,7。

理解生命周期对以后深入学习会有帮助，暂时理解下react的生命周期，为以后打下基础。新版本生命周期已经做了调整，等后面用到熟悉之后再作补充。