react native Component 生命周期

最新推荐文章于 2021-09-07 15:07:04 发布

Hi竹子

最新推荐文章于 2021-09-07 15:07:04 发布

阅读量462

点赞数 1

分类专栏： React Native

竹子原创，转载请附链接和署名

本文链接：https://blog.csdn.net/u010411264/article/details/53999571

版权

React Native 专栏收录该内容

39 篇文章 0 订阅

订阅专栏

1.测试一

/**
 * lutn 2017-01-03
 * 测试生命周期
 */

import React, { Component } from 'react';
import { AppRegistry, Text, View,TouchableOpacity,StyleSheet } from 'react-native';

export default class demo extends Component {

    constructor(props){
      super(props);
      this.state={
        s:'',
      }      
      console.log("1.构造函数：constructor");
    }

  componentWillMount(){
    console.log("2.挂载函数：componentWillMount");
  }

/**自定义函数*/
  _onPress(){
    
  }
  render() {
    console.log('3.渲染函数：render');
    return (
      
   
   
            
    
    
                
     
     
      
      改变状态
     
     
            
    
     
      
   
   
    )
  }
}

const styles = StyleSheet.create({
  button:{
    width:120,
    height:40,
    borderRadius:25,
    backgroundColor:"#33ffff",
    justifyContent:'center'
  },
  buttonText: {
      fontSize: 20,
      textAlign: 'center',
      color:'red'
  }
});

AppRegistry.registerComponent('demo', () => demo);

运行结果：

2.测试二

/**
 * lutn 2017-01-04 
 * react-native component 
    
    <生命周期测试二>
     
     
*/

import React, { Component } from 'react'; 
import {    
    Image,  
    TextInput,  
    View,  
    Text,
    StyleSheet,TouchableOpacity,AppRegistry
} from 'react-native'; 

export default class demo extends Component {
constructor(props){
      super(props);
      this.state={
        s:'',
      }      
      console.log("1.构造函数：constructor");
    }

  componentWillMount(){
    console.log("2.挂载前函数：componentWillMount");
  }
  componentDidMount(){
      console.log("4.挂载函数：componentDidMount");
  }

/**自定义函数*/
  _onPress = () =>{
    this.setState({
        s:'hello',
    });
  }
  render() {
    console.log('3.渲染函数：render');
    return (
      
     
     
            
      
      
                
       
       
        
        改变Component状态
       
       
            
      
       
      
     
     
    )
  }
}

const styles = StyleSheet.create({
  button:{
    width:120,
    height:40,
    borderRadius:25,
    backgroundColor:"#33ffff",
    justifyContent:'center'
  },
  buttonText: {
      fontSize: 20,
      textAlign: 'center',
      color:'red'
  }
});
AppRegistry.registerComponent('demo', () => demo);

运行显示：

点击按钮前：

点击按钮后，结果如下：

结论：state发生改变，render执行一次

3.测试三

从测试二中可以知道，执行顺序为：1构造函数，2挂载前函数，3渲染函数，4.挂载函数。如果有state状态改变，那么再次渲染函数执行。

再看下面例子：

/**
 * lutn 2017-01-04 
 * react-native component 
    
    <生命周期测试三>
     
     
*/
import React, { Component } from 'react'; 
import {    
    Image,  
    TextInput,  
    View,  
    Text,
    StyleSheet,TouchableOpacity,AppRegistry
} from 'react-native'; 

export default class demo extends Component {
constructor(props){
      super(props);
      this.state={
        s:'',
      }      
      console.log("1.构造函数：constructor");
    }

  componentWillMount(){
    console.log("2.挂载前函数：componentWillMount");
    this.setState({
        s:'1',
    });
  }
  componentDidMount(){
      console.log("4.挂载函数：componentDidMount");
  }

/**自定义函数*/
  _onPress = () =>{
  }
  render() {
    console.log('3.渲染函数：render');
    return (
      
     
     
            
      
      
                
       
       
        
        改变Component状态
       
       
            
      
       
      
     
     
    )
  }
}

const styles = StyleSheet.create({
  button:{
    width:220,
    height:40,
    borderRadius:25,
    backgroundColor:"#33ffff",
    justifyContent:'center'
  },
  buttonText: {
      fontSize: 20,
      textAlign: 'center',
      color:'red'
  }
});
AppRegistry.registerComponent('demo', () => demo);

运行结果：

4.测试四

/**
 * lutn 2017-01-04 
 * react-native component 
    
    <生命周期测试四>
     
     
*/
import React, { Component } from 'react'; 
import {    
    Image,  
    TextInput,  
    View,  
    Text,
    StyleSheet,TouchableOpacity,AppRegistry
} from 'react-native'; 

export default class demo extends Component {
constructor(props){
      super(props);
      this.state={
        s:'',
      }      
      console.log("1.构造函数：constructor");
    }

  componentWillMount(){
    console.log("2.挂载前函数：componentWillMount");
    
  }
  componentDidMount(){
      console.log("4.挂载函数：componentDidMount");
      this.setState({
        s:'1',
      });
  }

/**自定义函数*/
  _onPress = () =>{
  }
  render() {
    console.log('3.渲染函数：render');
    return (
      
     
     
            
      
      
                
       
       
        
        改变Component状态
       
       
            
      
       
      
     
     
    )
  }
}

const styles = StyleSheet.create({
  button:{
    width:220,
    height:40,
    borderRadius:25,
    backgroundColor:"#33ffff",
    justifyContent:'center'
  },
  buttonText: {
      fontSize: 20,
      textAlign: 'center',
      color:'red'
  }
});
AppRegistry.registerComponent('demo', () => demo);

运行结果：

结论：说明只要在 render 函数后改变状态，render就会被执行

5.测试五

/**
 * lutn 2017-01-04 
 * react-native component 
    
    <生命周期测试五>
     
     
*/
import React, { Component } from 'react'; 
import {    
    Image,  
    TextInput,  
    View,  
    Text,
    StyleSheet,TouchableOpacity,
    AppRegistry
} from 'react-native'; 

export default class demo extends Component {
constructor(props){
      super(props);
      this.state={
        i:1,
      }
      this.i = 1;      
      console.log("1.构造函数：constructor");
    }

  componentWillMount(){
    console.log("2.挂载前函数：componentWillMount");
    
  }
  componentDidMount(){
      console.log("4.挂载函数：componentDidMount");
      
  }
  componentWillReceiveProps(){
      console.log("5.更新Props函数：componentWillReceiveProps");
  }

/**自定义函数*/
  _onPress = () =>{
      this.setState({
        s:this.i++,
      });
  }
  render() {
    console.log('3.渲染函数：render->第'+this.i+"次渲染");
    return (
      
     
     
            
      
      
                
       
       
        
        改变Component状态
       
       
            
      
       
      
     
     
    )
  }
}

const styles = StyleSheet.create({
  button:{
    width:220,
    height:40,
    borderRadius:25,
    backgroundColor:"#33ffff",
    justifyContent:'center'
  },
  buttonText: {
      fontSize: 20,
      textAlign: 'center',
      color:'red'
  }
});
AppRegistry.registerComponent('demo', () => demo);

每次点击按钮都会执行render函数，结果如下：

6.研讨shouldComponentUpdate函数

对react-native Component组件的shouldComponentUpdate函数进行研究

shouldComponentUpdate函数有两个参数：nextProps, nextState ，分别是 下一次运行时的props和state，返回一个布尔值。写法如下：

shouldComponentUpdate(nextProps, nextState){
return true;
}

可以不带参数

shouldComponentUpdate(){
return true;
}

研究的问题

1.什么时候执行该函数？

2.返回true的话会怎么样？

3.返回false又会怎么样？

针对第一个问题，写了先得代码：

/**
 * lutn 2017-01-04 
 * react-native component
*/
import React, { Component } from 'react'; 
import {    
    Image,  
    TextInput,  
    View,  
    Text,
    StyleSheet,TouchableOpacity,
    AppRegistry
} from 'react-native'; 

export default class demo extends Component {
constructor(props){
      super(props);
      this.state={
        i:1,
      }   
      console.log("1.构造函数：constructor");
    }

  componentWillMount(){
    console.log("2.挂载前函数：componentWillMount");
    
  }
  componentDidMount(){
      console.log("4.挂载函数：componentDidMount");
      
  }

  shouldComponentUpdate(nextProps, nextState){
      console.log("上一次的状态=" + this.state.i);
      console.log("6.（状态state改变）监听函数：shouldComponentUpdate >state有改变");
      console.log("当前状态=" + nextState.i);
      return this.state.i !== nextState.i;
  }

/**自定义函数*/
  _onPress = () =>{
      let i = ( this.state.i + 1) 
      this.setState({
        i:i,
      });
  }
  render() {
    console.log('3.渲染函数：render >第'+this.state.i+"次渲染");
    return (
      
    
    
            
     
     
                
      
      
       
       改变Component状态
      
      
            
     
      
      
    
    
    )
  }
}

const styles = StyleSheet.create({
  button:{
    width:220,
    height:40,
    borderRadius:25,
    backgroundColor:"#33ffff",
    justifyContent:'center'
  },
  buttonText: {
      fontSize: 20,
      textAlign: 'center',
      color:'red'
  }
});
AppRegistry.registerComponent('demo', () => demo);

首次运行会看到：

后台会输出：

按下 “改变Component状态”按钮，就会看到输出：

我们通过按钮改变了state状态，没按下按钮，shouldComponentUpdate就会执行。是不是这样的，我们可以去掉_onPress函数中的改变state的代码，然后再按按钮，发现shouldComponentUpdate不再执行，从此得出结论是： state改变，shouldComponentUpdate执行，且在初始化render时不会执行。

对于shouldComponentUpdate的探究，我们的入手是他的两个参数，竟然改变state参数能让shouldComponentUpdate执行，那么改变props参数呢？

props参数是有调用该组件的对象或者标签传进来的值，传进来的值都存在props对象里。不过为了方便，我们只再自身内定义props。代码如下：