Android React Native组件的生命周期

原创 2015年11月19日 13:15:55

和Android一样,React的组件也有对应的生命周期。Android React Native组件的生命周期可以总的概括为下面这一张图。

这里写图片描述

可以把组件生命周期大致分为三个阶段:

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

生命周期回调函数总共有10个。

  • object getDefaultProps()
    在组件类创建的时候调用一次,然后返回值被缓存下来。全局调用一次,所有实例共享。

  • object getInitialState()
    在组件挂载之前调用一次。返回值将会作为 this.state 的初始值。

  • componentWillMount ()
    在初始化渲染执行之前立刻调用

  • ReactComponent render()
    这个方法是必须的,对视图进行渲染,你也可以返回 null 或者 false 来表明不需要渲染任何东西

  • componentDidMount()
    在初始化渲染执行之后立刻调用一次

  • componentWillReceiveProps(object nextProps)
    在组件接收到新的 props 的时候调用,也就是父组件修改子组件的属性时触发。在初始化渲染的时候,该方法不会调用。可以用于更新 state 来响应某个 prop 的改变。

  • boolean shouldComponentUpdate(object nextProps, object nextState)
    在接收到新的 props 或者 state,将要渲染之前调用,如果确定新的 props 和 state 不会导致组件更新,则此处应该 返回 false。返回true将进行渲染。

  • componentWillUpdate(object nextProps, object nextState)
    在接收到新的 props 或者 state 并且shouldComponentUpdate返回true时调用

  • componentDidUpdate(object prevProps, object prevState)
    在组件的更新已经同步到 DOM 中之后立刻被调用

  • componentWillUnmount()
    在组件从 DOM 中移除的时候立刻被调用。在该方法中执行任何必要的清理,比如无效的定时器,或者清除在 componentDidMount 中创建的 DOM 元素。

下面贴出测试代码。

/**
* Sample React Native App
* https://github.com/facebook/react-native
*/
'use strict';

var React = require('react-native');
var {
    AppRegistry,
    StyleSheet,
    View,
    Text
} = React;


var AwesomeProject = React.createClass({
    //在组件类创建的时候调用一次,然后返回值被缓存下来。
    getDefaultProps:function(){
        console.log("getDefaultProps");
        return null;
    },
    //初始化状态,在组件挂载之前调用一次。返回值将会作为 this.state 的初始值。
    getInitialState:function(){
        console.log("getInitialState");
        return null;
        //必须有返回值,可以是NULL或者一个对象。
    },
    //组件将要被渲染
    componentWillMount:function(){
        console.log("componentWillmount");

    },
    //渲染视图
    render:function(){
        console.log("render");

        return (
            <View>

            </View>
        );
        //你也可以返回 null 或者 false 来表明不需要渲染任何东西
    },
    //渲染视图完成后
    componentDidMount:function(){
        console.log("componentDidMount");

        this.loadDataToSetState();
    },
    //组件接收到新属性,在初始化渲染的时候,该方法不会调用。
    componentWillReceiveProps:function(nextProps){
        console.log("componentWillReceiveProps");
        //console.log(nextProps);
    },
    //组件是否需要更新
    shouldComponentUpdate:function(nextProps,nextState){
        console.log("shouldComponentUpdate");
        //console.log(nextProps+"|"+nextState);
        return true;
    },
    //组件将要被更新
    componentWillUpdate:function(nextProps,nextState){
        console.log("componentWillUpdate");
        //console.log(nextProps+"|"+nextState);
    },
    //组件更新完毕
    componentDidUpdate:function(prevProps,prevState){
        console.log("conponentDidUpdate");
        //console.log(prevProps+"|"+prevState);
    },

    //组件被销毁之前,做清理操作
    componentWillUnmount:function(){
        console.log("componentWillUnmount");
    },

    loadDataToSetState:function(){
        console.log("loadDataToSetState");
        this.setState({
            name : "RN"
        }) 
    },


});

var styles = StyleSheet.create({

});


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

最后的输出如下,我们在componentDidMount中调用了loadDataToSetState函数,该函数中通过了setState函数对state进行了设置,这时候就会回调shouldComponentUpdate,如果返回true,则会继续调用componentWillUpdaterender,conponentDidUpdate,之后按返回键退出应用,则会进行销毁操作,回调componentWillUnmount

getDefaultProps
getInitialState
componentWillmount
render
componentDidMount
loadDataToSetState
shouldComponentUpdate
componentWillUpdate
render
conponentDidUpdate
componentWillUnmount

而关于componentWillReceiveProps函数的触发是在props属性改变之后才会触发,这个比较复杂,什么情况下会改变呢,也就是父组件改变子组件的属性的时候。

首先我们定义一个子组件

var Name =React.createClass({
    getDefaultProps:function(){
        console.log("Name getDefaultProps");
        return null;
    },
    getInitialState:function(){
        console.log("Name getInitialState");
        return null;
    },
    componentWillMount:function(){
        console.log("Name componentWillmount");
    },
    render:function(){
        console.log("Name render");
        return (
            <Text>
                Hello,{this.props.name? this.props.name:"None!"}
            </Text>
        );
    },
    componentDidMount:function(){
        console.log("Name componentDidMount");
    },
    componentWillReceiveProps:function(nextProps){
        console.log("Name componentWillReceiveProps");
        console.log(nextProps);
    },
    shouldComponentUpdate:function(nextProps,nextState){
        console.log("Name shouldComponentUpdate");
        return true;
    },
    componentWillUpdate:function(nextProps,nextState){
        console.log("Name componentWillUpdate");
    },
    componentDidUpdate:function(prevProps,prevState){
        console.log("Name conponentDidUpdate");
    },
    componentWillUnmount:function(){
        console.log("Name componentWillUnmount");
    },
});

再定义一个父组件,在父组件的渲染函数中使用子组件,并为子组件设置name属性,即

<Name name={this.state.name}></Name>

而在父组件中,getInitialState函数中返回父组件的state值

return {name:"a"};

当组件加载完毕后,通过setState函数设置父组件的state

this.setState({
            name:"lizhangqu"
        });

这时候会触发父组件的render函数重新渲染,而render函数中会对子组件的name重新赋值,也就是setState中的值。

父组件的代码如下。

var Parent = React.createClass({

    render:function(){
        return (
            <View>
                <Name name={this.state.name}></Name>
            </View>

        );
    },

    getInitialState:function(){

        return {name:"a"};
    },

    componentDidMount:function(){

        this.setState({
            name:"lizhangqu"
        });
    },
});

在界面中,我们直接使用父组件作为返回。

var AwesomeProject = React.createClass({
  render: function() {
    return (
        <Parent></Parent>
    );
  }
});

这时候,由于子组件的属性发生了变换,就会回调componentWillReceiveProps生命周期函数,整个生命周期函数如下(我们在componentWillReceiveProps函数中打印了该属性所在的对象),

Name getDefaultProps
Name getInitialState
Name componentWillmount
Name render
Name componentDidMount
Name componentWillReceiveProps
Object {name: "lizhangqu"}
Name shouldComponentUpdate
Name componentWillUpdate
Name render
Name conponentDidUpdate
Name componentWillUnmount

而关于调试,React-Native官网提供了一个Chrome下调试的插件,见Chrome Developer Tools ,安装了该插件后,在手机上的开发者选项中开启debug js,就可以在chrome中看到控制台输出的信息以及js的报错信息了。

版权声明:本文为博主原创文章,未经博主允许不得转载。

React Native组件生命周期

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

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

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

React Native 组件的生命周期

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

ReactNative开发——组件的生命周期

ReactNative开发——组件的生命周期使用ES6语法创建Component我查看了下网上有关React Native中组件的生命周期有关的资料,发现大多介绍的是 ReactClass.creat...
  • a992036795
  • a992036795
  • 2017年06月06日 14:23
  • 1069

React-Native系列Android自定义原生UI组件

由于官方的Android原生UI组件解释的并不是很完整,根据个人的不断摸索,终于成功完成原生组件的制作,所以写下这篇文章作为记录,也给让小白们少走些弯路。我这里通过讲解制作一个绘圆组件的流程,来学习制...
  • d780793370
  • d780793370
  • 2016年09月17日 22:18
  • 5298

React-Native学习笔记之生命周期

React-Native学习笔记之生命周期
  • qq_25404567
  • qq_25404567
  • 2016年09月26日 18:15
  • 1561

React Native调用Android原生组件

React Native调用Android原生组件,官方文档用ReactImageView,后来参考这个哥们写的非常不错.https://github.com/1008611/RN-Resource-...
  • jujishou521
  • jujishou521
  • 2016年08月31日 18:11
  • 1403

Android React Native使用原生UI组件

Android React Native 已经将几个常用的原生组件进行了封装,比如 ScrollView 和 TextInput,但是并不是所有系统的原始组件都被封装了,因此有的时候我们不得不自己动手...
  • sbsujjbcy
  • sbsujjbcy
  • 2015年11月23日 15:12
  • 11821

React Native组件的生命周期及属性props

创建组件的三种方式第一种:通过ES6的方式创建/** * 方式一 :ES6 */export default class HelloComponent extends Component { ...
  • dakaniu
  • dakaniu
  • 2017年11月10日 17:05
  • 108

React组件生命周期详解

一、组件的生命周期介绍 组件的本质是状态机,输入确定,输出一定确定。 状态发生转换时会触发不同的钩子函数,从而让开发者有机会做出响应。 可以使用事件的思路来理解状态。 组件的生命周期: 1.初始化阶段...
  • u013063153
  • u013063153
  • 2016年09月10日 13:30
  • 1006
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Android React Native组件的生命周期
举报原因:
原因补充:

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