React生命周期

前言

React组件的生命周期可以分为挂载，渲染和卸载这几个阶段。
当渲染后的组件需要更新时，我们会重新去渲染组件，直至卸载。
因此，可以把React生命周期分成两类：
1.当组件在挂载或卸载时。
2.当组件接收新的数据时，即组件更新时。

一.挂载或卸载过程

1.组件初始化

static defaultProps保证this.props有初始值
this.state初始值
componentWillMount会在render之前调用，componentDidMount会在render之后调用，分别代表了渲染前后的时刻，
都只执行一次。
render之后，我们在componentDidMount中执行setState,组件会再次render,不过在初始化过程就渲染了两次组件
，这并不是一件好事，但实际情况是，有些场景不得不需要setState,比如计算组件的位置或宽高等，就不得不让组件
先渲染，更新必要的信息后，再次渲染。

2.组件的卸载：
componentWillMount,我们常常会执行一些清理方法，如事件回收或是清除定时器。

componentWillMount() {
        this.setState({
            a: this.state.a + 1    // 先执行willMount，a + 1，再执行render,componentDidMount
        });
        console.log('will' + this.state.a);
    }
    componentDidMount() {
        console.log('did' + this.state.a);
    }
    render() {
        console.log('render' + this.state.a);
        return (
            <div>
                <div><button onClick={ this.add }>home</button></div>
                <div>{ this.state.a }</div>
                <div>{ this.props.maxLoops }</div>
                <About2 id={ this.state.a } />
            </div>
        );
    }

二.数据更新过程

1.数据更新过程：
更新过程指的是父组件向下传递props或组件自身执行setState方法时发生的一系列更新动作。
如果组件自身state更新了，那么会依次执行shouldComponentUpdate,componentWillUpdate,render和componentDidUpdate。
shouldComponentUpdate是一个特别的方法，它接受需要更新的props和state,让开发者增加必要的条件判断，
让其在需要时更新，不需要时不更新。因此，当方法返回false的时候，组件不再向下执行生命周期方法。
2.父节点props改变
当父节点this.state改变，传入子组件的this.props发生改变，组件会依次调用componentWillReceiveProps,
shouldComponentUpdate,render,componentDidUpdate.
子组件会重新渲染。
3.如果组件是由父组件更新props而更新的，那么在shouldComponentUpdate之前会执行componentWillReceiveProps方法，此方法可以作为React在props传入后，渲染之前setState机会，在此方法中setState是不会二次渲染的。

componentWillReceiveProps(nextProps) {
        console.log('willreceive');
        console.log(nextProps);
        if (nextProps.id === 4) {
            this.setState({
                bb: 1000
            })
        }
    }
    shouldComponentUpdate(nextProps,nextState) {
        console.log('should update');
        if (nextState.bb === 16) {
            return false;
        }
        return true;
    }
    componentWillUpdate(nextProps,nextState) {
        console.log('will update');
    }
    componentDidUpdate(prevProps,prevState) {
        console.log('did update');
    }

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!