react生命周期总结

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和state
componentWillReceiveProps
组件是由父组件更新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

react生命周期总结