React Native 中组件的生命周期

概述

如图，可以把组件生命周期大致分为三个阶段：


第一阶段：是组件第一次绘制阶段，如图中的上面虚线框内，在这里完成了组件的加载和初始化；
第二阶段：是组件在运行和交互阶段，如图中左下角虚线框，这个阶段组件可以处理用户交互，或者接收事件更新界面；
第三阶段：是组件卸载消亡的阶段，如图中右下角的虚线框中，这里做一些组件的清理工作。

生命周期回调函数

getDefaultProps

componentWillMount

void componentWillMount()  
 

componentDidMount

void componentDidMount()  
 

componentWillReceiveProps

  

   

    

     

    
    

     

      void componentWillReceiveProps(  
     
    
   

    

     

    
    

     

        object nextProps
     
    
   

    

     

    
    

     

      )
     
    
  
 

  

   

    

     

    
    

     

      componentWillReceiveProps: function(nextProps) {  
     
    
   

    

     

    
    

     

        this.setState({
     
    
   

    

     

    
    

     

       likesIncreasing: nextProps.likeCount > this.props.likeCount
     
    
   

    

     

    
    

     

        });
     
    
   

    

     

    
    

     

      }
     
    
  
 

shouldComponentUpdate

  

   

    

     

    
    

     

      boolean shouldComponentUpdate(  
     
    
   

    

     

    
    

     

        object nextProps, object nextState
     
    
   

    

     

    
    

     

      )
     
    
  
 

输入参数 nextProps 和上面的 componentWillReceiveProps 函数一样，nextState 表示组件即将更新的状态值。这个函数的返回值决定是否需要更新组件，如果 true 表示需要更新，继续走后面的更新流程。否者，则不更新，直接进入等待状态。


默认情况下，这个函数永远返回 true 用来保证数据变化的时候 UI 能够同步更新。在大型项目中，你可以自己重载这个函数，通过检查变化前后属性和状态，来决定 UI 是否需要更新，能有效提高应用性能。

componentWillUpdate

  

   

    

     

    
    

     

      void componentWillUpdate(  
     
    
   

    

     

    
    

     

        object nextProps, object nextState
     
    
   

    

     

    
    

     

      )
     
    
  
 

componentDidUpdate

  

   

    

     

    
    

     

      void componentDidUpdate(  
     
    
   

    

     

    
    

     

        object prevProps, object prevState
     
    
   

    

     

    
    

     

      )
     
    
  
 

componentWillUnmount

void componentWillUnmount()  

总结

文章来源: chenyu.blog.csdn.net，作者：chen.yu，版权归原作者所有，如需转载，请联系作者。

原文链接：chenyu.blog.csdn.net/article/details/49871097