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 Native组件生命周期

概述所谓生命周期,就是一个对象从开始生成到最后消亡所经历的状态,理解空间的生命周期,是开发中必须掌握的一个知识点。就像 Android 开发中组件 一样,React Native的组件也有生命周期(L...
  • xiangzhihong8
  • xiangzhihong8
  • 2017年01月08日 23:11
  • 3240

React Native入门——组件构成及生命周期简介

刚开始接触React Native开发的程序猿可能会拿着网上的例子和文档一头雾水,毕竟不是像C语言有个main、Android有个OnCreate,iOS有个ViewDidLoad那样,加上JavaS...
  • daleiwang
  • daleiwang
  • 2016年02月15日 16:59
  • 8642

Android React Native组件的生命周期

和Android一样,React的组件也有对应的生命周期。Android React Native组件的生命周期可以总的概括为下面这一张图。可以把组件生命周期大致分为三个阶段: 第一阶段:是组件第一次...
  • sbsujjbcy
  • sbsujjbcy
  • 2015年11月19日 13:15
  • 4770

React Native 组件的生命周期

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

React-Native生命周期的触发场景和一些小建议

转载请注明出处:王亟亟的大牛之路把王者荣耀删了后这几天回到了举铁,遛鸟,打球,睡觉的正常节奏,然后卡了看之前写的一些东西,发现生命周期没写,那么就补一篇(虽然搜搜一大堆,但是残缺总不合适,再加点建议点...
  • ddwhan0123
  • ddwhan0123
  • 2017年11月09日 17:54
  • 614

React Native0.50+开发指导(中文更新说明)

本文主要对React Native 0.50的关键性的更新做个讲解和开发适配指导,希望能对从事React Native开发的你有所帮助: - 在兼容性方面新增了对Android8.0、iPhone ...
  • fengyuzhengfan
  • fengyuzhengfan
  • 2017年12月14日 23:29
  • 365

React-Native-源码分析三-JSX如何渲染成原生页面(下)

前文中这次会反推JSX如何最终变化为原生控件的过程,上面这部分算是原生的绘制已经结束,下面开始到JS代码中找,JSX布局如何传达到原生的。经验之谈:要凭借我的半吊子js和C水平要去扒拉React-Na...
  • xujinyang1234
  • xujinyang1234
  • 2016年09月13日 14:17
  • 2052

React 框架解析

这篇文章跟博客已有的其他文章有一些分离, 博客大部分是语言解析和底层编程的, 最近我对一些 JavaScript 框架有了兴趣, 包括 Facebook 的 React. 我最近阅读的文章, 特别是 ...
  • FANCHUANLIN2000
  • FANCHUANLIN2000
  • 2015年01月17日 22:08
  • 693

(十四)Reactnative中ref属相详解

在用Reactnative写工程时,默认奇妙的有一种像OC中,或者java 中或者当前类的私有属相的想法,state 和props都不能满足时,就是ref   它能达到其他语言中持有一个view组件...
  • yuanmengong886
  • yuanmengong886
  • 2016年11月25日 20:23
  • 3635

React Native生命周期整理

整理的React Native的生命周期。
  • violetjack0808
  • violetjack0808
  • 2016年05月11日 22:16
  • 953
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:react native Component 生命周期
举报原因:
原因补充:

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