react native Component 生命周期

原创 2017年01月03日 23:56:56

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。代码如下:


















版权声明:竹子原创,未经允许不得转载

相关文章推荐

React Component 的生命周期 API

概述每个 React 的组件都会有一组 “生命周期方法” ,你可以通过重载它们,使得你可以在组件的处理过程中插入特定的代码。根据时机分化如下三类挂载 (Mounting)这些方法会在组件的实例被创建和...

React Component Lifecycle(生命周期)

生命周期所谓生命周期,就是一个对象从开始生成到最后消亡所经历的状态,理解生命周期,是合理开发的关键。RN 组件的生命周期整理如下图:如图,可以把组件生命周期大致分为三个阶段:第一阶段:是组件第一次绘制...

React Component生命周期

在组件的整个生命周期中,随着该组件的props或者state的变化,它的DOM表现也将有相应的改变,一个组件就是一个状态机,对于特定的输入,它总会返回一致的输出。 React为每个组件提供了勾子函数...

React Native 入门(十) - 组件的生命周期

组件的生命周期展示了它从被创建到销毁的过程。无论在什么平台上,组件总是有它自己的生命周期,对于移动开发者来说生命周期肯定不陌生了。为了更好的管理组件的生命周期,我们需要了解在生命周期的哪些阶段执行了哪...

React Native 组件的生命周期

一、生命周期流程图下面是通过ProcessOn绘制的React Native组件生命周期流程图,可以先大致看一下,有一个初步的概念,下文会详情介绍。二、基础巩固props 组件的不可变属性,在组件...

蓝鸥React Native零基础入门到项目实战 组件的生命周期

蓝鸥React Native零基础入门到项目实战 组件的生命周期

react-native 的生命周期,以及通信关系,转载

import React, {Component} from 'react'; import { AppRegistry, StyleSheet, Text, View...

React Native 之生命周期

前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所...

React Native 中组件的生命周期

概述 就像 Android 开发中的 View 一样,React Native(RN) 中的组件也有生命周期(Lifecycle)。所谓生命周期,就是一个对象从开始生成到最后消亡所经历的状态,理解生命...

React Native (2)生命周期 详解

就像 Android 开发中的 View 一样,React Native(RN) 中的组件也有生命周期(Lifecycle)。所谓生命周期,就是一个对象从开始生成到最后消亡所经历的状态,理解生命周期,...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:react native Component 生命周期
举报原因:
原因补充:

(最多只允许输入30个字)