react 运行时生命周期

第一篇文章我们讲了react加载时的生命周期，上一篇文章讲了子组件相关的问题，这次我们将说一说关于运行时的生命周期。何为运行时生命周期，既我们执行某个操作的时候，到子组件更新这个过程，react做了哪些事情。运行时生命周期主要分为shouldComponentUpdate、componentWillUpdate、componentWillReceiveProps、componentDidUpdate四个生命周期。下面我们将依次揭开他们的面纱。

一、shouldComponentUpdate

shouldComponentUpdate顾名思义，既是当前操作是否合法，有一个返回值，当为true时将会执行，当返回false将阻止此次操作。对我来说我觉得有点像我们平时写a标签或则form表单的时候，阻止其默认行为一样。在react中用的最多的就是在登录检验的时候，可以作为数据验证。同时，他接受两个参数，一个将要更新后的props，以及一个更新后的state,代码如下。

shouldComponentUpdate(nextProps, nextState) {
    console.log(nextProps);
    console.log(nextState);
    console.log('运行时的状态-1');
    return true;
 }

二、componentWillUpdate

这个周期同加载时的componentWillMount周期一样，可以作为一些数据的初始化。介于shouldComponentUpdate以及componentWillReceiveProps之间，一般用的不多，在这里就不过多说明。

三、componentWillReceiveProps

componentWillReceiveProps生命周期更多的是用于对组件进行数据的验证，它可以接受来自更新后的props,以及state。同shouldComponentUpdate有点像，但是不同的是，componentWillReceiveProps不能阻止当前操作的执行，只是起到了一个检测的作用。

componentWillReceiveProps(nextProps) {
    console.log(nextProps,' 可用着数据检查');
}

四、componentDidUpdate

componentDidUpdate既当前操作已经完成，可以用在动画上，已达到更人性化的效果。当然，也可以作为销毁一些东西做处理。

整个运行的生命周期先后示意图如下图所示。

1111.png

同时，我在这里做了一个类似一些完整点赞功能的实现，通过配合运行时的生命周期componentWillReceiveProps，对其子组件的state进行改变，从而返回不同的试图，代码如下。

class Btn extends React.Component {
    constructor(props) {
    super(props);
        this.state = {
            show: true
        }
    }
    componentWillReceiveProps() {
        this.setState({
              show: false
        })
    }
    render() {
        if(this.state.show) {
            return (
                <button onClick={this.props.addCount} >点击数字加1</button>
            )
        } else {
            return (
                <span> 已经计算 </span>
            )
        }
    }
}

<p><Btn addCount={this.addCount} /></p>

实际应用中还是有很多地方可用的，这里只是一个简单的例子。
源码地址:https://github.com/jiosers/react-study/blob/master/react/index3.html