1.组件挂载和卸载时
componentWillMount
在render方法之前执行，只会在组件初始化时运行一次，执行setState但是组件只会渲染一次，初始化state应该在构造函数中初始化-
componentDidMout
在render方法之后执行，也只会在组件初始化时运行一次，执行setState会再次渲染组件- 执行fetch操作获取数据后将loading信息替换为实际数据
- 绑定原生事件处理程序
-
componentWillUnmout
组件卸载前执行- 事件回收
- 清除定时器
2.数据更新过程
组件自身state更新了，会依次执行shouldComponentUpdate, componentWillUpdate, render, componentDidUpdate
shouldComponentUpdate
接受需要更新的props和state，让开发者执行条件判断，在需要时更新，不需要时不更新componentWillUpdate
更新过程中渲染之前，提供新的props和state，如果在这里直接调用setState，则又需要重新渲染，会陷入死循环componentDidUpdate
更新过程中渲染之后，提供以前的props和statecomponentWillReceiveProps
组件是由父组件更新props而更新的，则在调用shouldComponentUpdate之前调用componentWillReceiveProps方法，可以在props传入后，渲染之前改变组件state的机会，在这里调用setState是不会二次渲染
3.使用createClass创建自定义组件
createClass是创建自定义组件的入口方法，管理生命周期中的getDefaultProps，依次执行
- 利用原型继承Component父类
- 按顺序合并mixin
- 设置初始化defaultProps
- 返回构造函数
4.MOUTING阶段
MOUTING阶段管理生命周期中的getInitialState, componentWilMount, render, componentDidMount
- 因为只会创建一次组件的构造函数，所以只会调用一次getDefaultProps来获取组件的默认输入属性
- 组件初始化，初始化props, context, 利用getInitialState获取初始化state，初始化更新队列和更新状态
- 若存在componentWillMount，则执行。在这里调用setState不会触发render，会将state变化加入更新队列，在render中统一对state进行更新，在render中才能获取到更新后的state
- 执行render，进行递归渲染子组件的内容
- 渲染完成后，若存在componentDidMount，则执行
5.RECEIVE_PROPS阶段
RECEIVE_PROPS阶段负责管理生命周期中的componentWillReceiveProps, shouldComponentUpdate, componentWillUpdate, render, componentDidUpdate
- 若存在componentWillReceiveProps，则执行。在这里调用setState也不会触发render，会将state变化加入更新队列，最后在render中才会统一对state进行更新，只有在render和componentDidUpdate中才能获取到更新后的state
- 执行shouldComponentUpdate，判断是否需要进行组件更新
- render本质上也是递归渲染内容
- 渲染完成，若存在componentDidUpdate，则执行
性能优化：因为组件的渲染是进行递归渲染子组件，此时可能子组件的props和state并没有发生变化，并不需要更新组件，所以应该在shouldComponentUpdate中引入PureRenderMixin，来判断是否需要更新组件，不需要则无需进行虚拟DOM的比较
注意：禁止在shouldComponentUpdate和componentWillUpdate中调用setState，这会造成循环调用，因为setState会引起重渲染；与之相对的，在componentWillReciveProps中调用setState是不会触发重渲染，而是会在调用render方法时，才会进行state合并
6.UNMOUNTING阶段
UNMOUNTING阶段负责管理生命周期中的componentWillUnmount
- 若存在componentWillUnmount，则执行。在这里调用setState不会触发render，因为组件之后要进行卸载
- 将更新队列和更新状态都被重置为null，并清除公共类，完成组件的卸载操作
7.无状态组件
生命周期和组件state让React越来越灵活，但是很多时候需要的只是一个仅负责渲染的组件
无状态组件只是一个render方法，无法实现组件生命周期方法，如果需要对其进行强化，可以考虑使用高阶组件，对无状态组件进行封装
例如，如果要根据窗口的大小对组件的大小进行实时更新，可以创建一个高阶组件，来将窗口信息通过props传递给子组件：
const withViewport=(ComposedComponent)=>{
return class Viewport extends Component{
constructor(props){
super(props);
this.state={
viewport: {
width: 1366,
height: 768
}
};
}
componentDidMount(){
this.handleResize();
window.addEventListener('resize',this.handleResize);
}
componentWillUnmount(){
window.removeEventListener('resize',this.handleResize);
}
handleResize=()=>{
const {viewport}=this.state;
if(viewport.width!==window.width || viewport.height!==window.height){
this.setState({
viewport: {
width: window.innerWidth,
height: window.innerHeight
}
});
}
}
render(){
return <ComposedComponent viewport={this.state.viewport} {...this.props}/>
}
}
};
8.生命周期总结
首次渲染时：
1.getDefaultProps
2.getInitialState
3.componentWillMount
4.render //递归渲染子组件
5.componentDidMount
卸载组件时：
1.componentWillUnmount
再次渲染组件时：
1.componentReceiveProps
2.shouldComponentUpdate
3.componentWillUpdate
4.render
5.componentDidUpdate
组件内部state改变时：
1.shouldComponentUpdate
2.componentWilUpdate
3.render
4.componentDidUpdate
