美文网首页
react生命周期总结

react生命周期总结

作者: 星月西 | 来源:发表于2017-06-05 11:07 被阅读389次

    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生命周期总结

          本文链接:https://www.haomeiwen.com/subject/dqlhfxtx.html