React生命周期

组件的生命周期

---

组件会经过三个过程：

1. 装载过程(Mount),也就是把组件爱你第一次在DOM树中渲染的过程；
2. 更新过程(Update),当组件被重新渲染的过程；
3. 卸载过程(Unmount),组件从DOM中删除的过程。

componentWillMount和componentDidMount区别

装在过程

componentWillMount可以在服务器和浏览器端被调用；而componentDidMount只能在浏览器端被调用。在服务器端使用React的时候不会被调用。

更新过程

当组件被装在在DOM树上之后，用户在网页上可以看到组件的第一印象，但是要提供更好的交互体验，就要让该组件可以随用户操作改变展现的内容，当props或者state被修改的时候，就回引发组件的更新过程。

• componentWillReceiveProps
• shouldComponentUpdate
• componentWillUpdate
• render
• componentDidUpdate

componentWillReceiveProps

该组件实际上，只要是父组件的render函数被调用，在render函数里面被渲染的子组件就会经历更新过程，不管父组件传给子组件的props有没有改变，都会触发子组件的componentWillReceiveProps函数。

注意，通过this.setState方法触发的更新过程，不会调用这个函数，这是因为这个函数适合根据新的props值(也就是参数nextProps)来计算出是不是要更新内部状态state.更新组件内部状态的方法就是this.setState的调用导致componentWillReceiveProps再一次被调用。拿就是一个死循环了。

shouldComponentUpdate(nextProps,nextState)

除了render函数，shouldComponentUpdate可能是React组件生命周期最重要的一个函数了。说render函数重要，是因为render函数决定了该渲染什么，而说shouldComponentUpdate函数重要，是因为它决定了一个组件什么时候不需要渲染。

shouldComponentUpdate和render函数，也是React生命周期函数中，唯独两个要求有返回结构的函数。render函数的返回结果将用于构造DOM对象，而shouldComponentUpdate函数返回一个布尔值。告诉React库这个组件在这次更新过程中是否要继续。

说shouldComponentUpdate重要，就是因为只要使用恰当，他就能够大大提高React组件的性能，虽然React的渲染性能已经很不错了，但是不管渲染有多快，如果发现没必要重新渲染，那就干脆不用渲染好了，速度会更快。

shouldComponentUpdate的参数就是接下来的props和state值。我们需要在shouldComponentUpdate中比较 this.state.xx ,this.props. xx,nextState.xx和nextProps.xx来进行比较。返回true或false来渲染组件，优化性能。

componentWillUpdate和componentDidUpdate

如果shouldComponentUpdate函数返回true，React接下来就回一次调用对应组件的componentWillUpdate 、render和componentDidUpdate函数。
和装载过程不同的是，当在服务器端使用React渲染时，这一对函数中Did函数，也就是，componentDidUpdate函数，并不是只在浏览器端才执行。无论更新过程发生在服务器端还是浏览器端，该函数都会被调用。

卸载过程

componentWillUnmount。componentWillUnmount和componentDidMount有关，比如，在componentDidMount中用非React的方法创造了一些DOM元素，如果撒手不管可能会造成内存泄露，那就需要在componentWillUnmount中把这些创造的DOM元素清理掉。

---

React的state来存储状态的一个缺点，拿就是数据的冗余和重复。这就是我们接下来要解决的问题。