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