<body>
<div id="app"></div>
<script type="text/javascript" src="./js/react.development.min.js"></script>
<script type="text/javascript" src="./js/react-dom.development.min.js"></script>
<script type="text/javascript" src="./js/babel.min.js"></script>
<script type="text/javascript" src="./js/prop-types.js"></script>
<script type="text/babel">
class A extends React.Component {
state = {
carName: '奔驰'
}
changeCar = () => {
this.setState({ carName: '奥拓' });
}
componentWillMount() {
console.log('A---componentWillMount');
}
componentDidMount() {
console.log('A---componentDidMount');
}
componentWillUpdate() {
console.log('A---componentWillUpdate');
}
componentDidUpdate() {
console.log('A---componentDidUpdate');
}
render() {
console.log('A---render');
return (
<div>
<div>我是A组件</div>
<B carName={this.state.carName} />
<button onClick={this.changeCar}>更改车名</button>
</div>
)
}
}
class B extends React.Component {
componentWillReceiveProps() {
console.log('B---componentWillReceiveProps');
}
componentWillUpdate() {
console.log('B---componentWillUpdate');
}
componentDidUpdate() {
console.log('B---componentDidUpdate');
}
componentWillMount() {
console.log('B---componentWillMount');
}
componentDidMount() {
console.log('B---componentDidMount');
}
render() {
console.log('B---render');
return (
<div>
车名：{this.props.carName}
</div>
)
}
}
ReactDOM.render(<A />, document.querySelector('#app'));
</script>
</body>
初次渲染：
上述组件中，B组件作为A组件的子组件，
B中接收的props中的carName，是由A组件中作为状态的carName以props的形式传入的
在不点击更新状态的方法时，上述父子组件的生命周期钩子执行顺序（控制台输出）：
A---componentWillMount
A---render
B---componentWillMount
B---render
B---componentDidMount
A---componentDidMount
你可以这样理解：造房子是先搭外层框架，再搭内层框架，内层全部搭完以后，给外层刷个漆，整个房子就造好了
放到React父子组件中这么理解：
先执行父组件 componentWillMount、render，
由于B组件是在A组件的render钩子中作为函数返回值return出去的，所以执行到父组件的render方法，
就会开始渲染子组件，所以当执行父组件的render后，父组件就会停下来，
然后开始执行子组件的componentWillMount、render、componentDidMout，
当子组件的三大生命周期钩子执行完毕后，最后执行父组件A的componentDidMount
因为只有父组件A中的子组件全部渲染完成（子组件所有钩子函数执行完毕后），父组件才能真正渲染完成（调用父组件的componentDidMount）
更新页面：
当点击更新状态的按钮时，控制台输出：
A---componentWillUpdate
A---render
B---componentWillReceiveProps // 子组件如果接收props且该props发生改变，在更新状态时调用（初次渲染页面时不会调用该钩子）
B---componentWillUpdate
B---render
B---componentDidUpdate
A---componentDidUpdate
上述可以这么理解，
当父组件调用setState来更新状态时，会调用父组件的componentWillUpdate，
然后A组件重新渲染，调用render，在render中，检测到子组件B，
然后父组件的更新先停止，进到子组件的生命周期钩子中，
无论子组件有没有接收到父组件传递过来的props，都会调用componentWillReceiveProps，
然后进行B组件的componentWillUpdate、render、componentDidUpdate，
这时子组件重新渲染完成，跳出来到父组件中，执行父组件的componentDidUpdate，
最后就更新完成整个组件
