### 更新过程 当组件被装载到DOM树上之后，用户在网页上可以看到组件的第一印象，但是要提供更好的交互体验，就要让该组件可以随着用户操作改变展现的内容，当props或者state被修改的时候，就会引发组件的更新过程。更新过程会依次调用下面的生命周期函数，其中render函数和装载过程一样，没有差别。 在更新时也会触发5个钩子函数： 1. componentWillReceivePorps(nextProps) 组件初始化时不调用，组件接受新的props时调用。 2. shouldComponentUpdate(nextProps, nextState) react性能优化非常重要的一环。组件接受新的state或者props时调用，我们可以设置在此对比前后两个props和state是否相同，如果相同则返回false阻止更新，因为相同的属性状态一定会生成相同的dom树，这样就不需要创造新的dom树和旧的dom树进行diff算法对比，节省大量性能，尤其是在dom结构复杂的时候。不过调用this.forceUpdate会跳过此步骤。 3. componentWillUpdata(nextProps, nextState) 组件初始化时不调用，只有在组件将要更新时才调用，此时可以修改state 4. render() 页面渲染 5. componentDidUpdate() 组件初始化时不调用，组件更新完成后调用，此时可以获取dom节点。 不过，并不是所有的更新过程都会执行全部函数，下面会介绍到各种特例。 #### 1. componentWillReceiveProps（nextProps） 只要是父组件的render函数被调用，在render函数里面被渲染的子组件就会经历更新过程，不管父组件传给子组件的props有没有改变，都会触发子组件的componentWill-ReceiveProps函数。 注意，通过this.setState方法触发的更新过程不会调用这个函数，这是因为这个函数适合根据新的props值（也就是参数nextProps）来计算出是不是要更新内部状态state。 #### 2.shouldComponentUpdate（nextProps，nextState） shouldComponentUpdate函数是React生命周期中非常重要的一个函数。因为如果说render函数很重要，是因为render函数决定了该渲染什么，而说shouldComponentUpdate函数重要，是因为它决定了一个组件什么时候不需要渲染。 在更新过程中，React库首先调用shouldComponentUpdate函数，如果这个函数返回true，那就会继续更新过程，接下来调用render函数；反之，如果得到一个false，那就立刻停止更新过程，也就不会引发后续的渲染了。 说shouldComponentUpdate重要，就是因为只要使用恰当，他就能够大大提高React组件的性能，虽然React的渲染性能已经很不错了，但是，不管渲染有多快，如果发现没必要重新渲染，那就干脆不用渲染好了，速度会更快。 比如如下代码: ```js shouldComponentUpdate(nextProps, nextState) { return (nextProps.caption !== this.props.caption) || (nextState.count !== this.state.count); } ``` 仅当下一个状态传入的 caption 与当前状态的 caption 不一致，或者以一个自身状态的 count 与当前状态的 count 不一致时，才执行接下来的生命周期函数。 #### 3. componentWillUpdate 和 componentDidUpdate 如果组件的 `shouldComponentUpdate` 函数返回 true，React接下来就会依次调用对应组件的 `componentWillUpdate`、`render` 和 `componentDidUpdate` 函数。