场景
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
class A extends Component {
componentWillMount() {
console.log('A: componentWillMount');
}
render() {
console.log('A: render');
return (
<div>
<div>456</div>
<div>A{this.props.a}</div>
</div>
);
}
componentDidMount() {
console.log('A: componentDidMount');
}
componentWillReceiveProps() {
console.log('A: componentWillReceiveProps');
}
shouldComponentUpdate() {
console.log('A: shouldComponentUpdate');
return true;
}
componentWillUpdate() {
console.log('A: componentWillUpdate');
}
// render
componentDidUpdate() {
console.log('A: componentDidUpdate');
}
}
class Page extends Component {
state = {
a: 1
};
componentWillMount() {
console.log('Page: componentWillMount');
}
render() {
console.log('Page: render');
return (
<div>
<div>123</div>
<A a={this.state.a} />
</div>
);
}
componentDidMount() {
console.log('Page: componentDidMount');
setTimeout(() => {
console.warn('Page: setState');
this.setState({
a: 1
});
}, 2000);
}
componentWillReceiveProps() {
console.log('Page: componentWillReceiveProps');
}
shouldComponentUpdate() {
console.log('Page: shouldComponentUpdate');
return true;
}
componentWillUpdate() {
console.log('Page: componentWillUpdate');
}
// render
componentDidUpdate() {
console.log('Page: componentDidUpdate');
}
}
ReactDOM.render(
<Page />,
document.getElementById('app')
);
解答
1. 日志分析
（1）即使没有改变state，也会调用shouldComponentUpdate。
this.setState({a:2});（改变了state）和this.setState({a:1});（没有改变state）日志结果一样。
// 当前组件和子组件shouldComponentUpdate都为true
Page: componentWillMount
Page: render
A: componentWillMount
A: render
A: componentDidMount
Page: componentDidMount
Page: setState
Page: shouldComponentUpdate ---- true
Page: componentWillUpdate
Page: render
A: componentWillReceiveProps
A: shouldComponentUpdate ---- true
A: componentWillUpdate
A: render
A: componentDidUpdate
Page: componentDidUpdate
（2）如果A组件的shouldComponentUpdate返回false。
那么A组件的componentWillUpdate render componentDidUpdate就都不执行了。
// 子组件shouldComponentUpdate为false
Page: componentWillMount
Page: render
A: componentWillMount
A: render
A: componentDidMount
Page: componentDidMount
Page: setState
Page: shouldComponentUpdate ---- true
Page: componentWillUpdate
Page: render
A: componentWillReceiveProps
A: shouldComponentUpdate ---- false
Page: componentDidUpdate
注：这一点只是在当前React版本中生效
Currently, if shouldComponentUpdate() returns false, then componentWillUpdate(), render(), and componentDidUpdate() will not be invoked. Note that in the future React may treat shouldComponentUpdate() as a hint rather than a strict directive, and returning false
may still result in a re-rendering of the component.
—— React.Component: shouldComponentUpdate()
（3）如果组件Page的shouldComponentUpdate返回false。
那么Page组件的componentWillUpdate render componentDidUpdate就都不执行了。
// 当前组件的shouldComponentUpdate为false
Page: componentWillMount
Page: render
A: componentWillMount
A: render
A: componentDidMount
Page: componentDidMount
Page: setState
Page: shouldComponentUpdate ---- false
注意，A组件的componentWillReceiveProps shouldComponentUpdate componentWillUpdate render componentDidUpdate也都不执行了。
因为，子组件的componentWillReceiveProps是在父组件render后执行的，子组件componentDidUpdate后，父组件才会componentDidUpdate。
2. DOM更新
在调试工具中查看哪些DOM被重新渲染
（1）打开chrome开发者工具
（2）按Esc，打开console
（3）点击console左边的按钮，勾选Rendering
（4）勾选Paint Flashing
我们发现，即使render函数被调用，DOM也不是全部更新，而是根据diff算法来更新。
3. 结论
只要执行this.setState，则当前组件的shouldComponentUpdate就会被调用。
如果当前组件的shouldComponentUpdate返回true，
则子组件的componentWillReceiveProps shouldComponentUpdate将被调用，不论子组件的props是否被改变。
如果当前组件的shouldComponentUpdate返回false，
则子组件的componentWillReceiveProps shouldComponentUpdate componentWillUpdate render componentDidUpdate都不被调用。
如果子组件的shouldComponentUpdate返回true，则调用componentWillUpdate render，然后通过diff算法更新DOM，最后调用componentDidUpdate。
如果子组件的shouldComponentUpdate返回false，则子组件的componentWillUpdate render componentDidUpdate都不被调用。
参考
React.Component: The Component Lifecycle
Reconciliation: The Diffing Algorithm
