生命周期(下)

1.组件首次加载

getDefaultProps只会在装载之前调用一次，在组件中赋值的数据会被设置到this.props中。
getInitialState只会在装载之前调用一次，这个函数的返回值会被设置到this.state中，需要注意的是，在ES6的写法，只需写在constructor中即可，如下
class MyCompoment extends React.Component{
constructor(props) {
super(props);
//在这里声明state
this.state = {count: 0};
}
}
componentWillMount在render之前被调用，可以在渲染之前做一些准备工作。
render这个方法是组件的一个必要方法。当这个方法被调用的时候，应返回一个ReactElement对象。render是一个纯函数，它的意义就是在给定相同的条件时，它的🔙返回结果应该每次都完全一致的。不应该有任何修改组件state的代码或者修改组件state 的代码或者是和浏览器交互的情况。
componentDidMount只会在装载完成之后调用一次，在render之后调用，从这里开始获取组件的DOM结构。如果想让组件加载完毕后做一些额外的操作（比如AJAX请求等），可以在这个方法中添加相应代码。
2.组件props更新

当组件接收到新的props的时候，会依次触发下列方法。
componentWillReceiveProps(object nextProps)，在组件接收到新的props的时候被触发，参数nextProps就是传入的新的props，你可以用它和this.props比较，来决定是否用this.setState实现UI重新渲染。
shouldCompentUpdate，在重新render之前被调用，可以返回一个布尔值来决定一个组件是否更新，如果返回false，那么前面的流程都不会被触发。这个方法默认的返回值都是true。
render，和组件首次加载的方法相同
componentDidUpdate，重新渲染完成以后立即调用，和componentDidMount类似
3.组件卸载

componentWillUnmount，在组件被卸载和销毁之前调用的方法，可以在这里做一些清理的工作。

探索BodyIndex的componentWillMount和componentDidMount生命周期
import React from 'react';
export default class BodyIndex extends React.Component{
componentWillMount(){
//定义你的逻辑即可
console.log("BodyIndex - componentWillMount");
}

componentDidMount(){
console.log("BodyIndex - componentDidMount");
}
render(){
...
return(
...
)
}
}
在浏览器的开发者工具中就可以看到console
再来查看Index的的componentWillMount和componentDidMount生命周期，BodyIndex包含在Index中

在浏览器的开发者工具中就可以看到console,如下图