更新过程
- componentWillReceiveProps
- shouldComponentUpdate
- componentWillUpdate
- render
- componentDidUpdate
1.componentWillReceiveProps(nextProps)
只要是父组件的render函数被调用,在render函数里面被渲染的子组件就会经历更新过程,不管父组件传给子组件的props有没有改变,都会触发子组件的componentWillReceiveProps函数。
注意,通过this.setState方法触发的更新过程不会调用这个函数,是因为这个函数适合根据新的props值(也就是参数nextProps)来计算出是不是要更新内部状态state。更新组件内部方法就是this.setState,如果this.setState的调用导致componentWillReceiveProps再一次被调用,那就是一个死循环。
2.shouldComponentUpdate
shouldComponentUpdate可能是除了render函数React组件生命周期中最重要的一个函数。它决定了一个组件什么时候不需要渲染。
render和shouldComponentUpdate函数,也是React生命周期中唯二两个要求有返回结果的函数。render函数的返回结果将用于构造DOM对象,而shouldComponentUpdate函数返回一个布尔值,告诉React库这个组件在这次更新过程中是否要继续。
在更新过程中,React首先调用shouldComponentUpdate函数,如果这个函数返回true,那就会继续更新过程,接下来调用render函数;反之,如果得到一个false,那就立刻停止更新过程,也就不引发后续渲染。
shouldComponentUpdate使用恰当,能大大提高React性能。
3.componentWillUpdate和componentDidUpdate
如果组件shouldComponentUpdate函数返回true,React接下来会一次调用对应组件的componentWillUpdate、render和componentDidUpdate函数。
和装载过程不同的是,当在服务器端使用React渲染时,这一对函数中的Did函数,当在服务器端使用React渲染时,这一对函数中的did函数(componentDidUpdate函数),并不是只在浏览器端才执行的,无论更新过程发生在服务器端还是浏览器端,该函数都会被调用。
卸载过程
React组件的卸载过程只涉及一个函数componentWillUnmount,当React组件要从DOM树上删除掉之前,对应的componentWillUnmount函数会被调用,所以这个函数适合做一些清理性的工作。