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的报错信息了。

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

相关文章推荐

RN(react native)入坑指南-10,组件的生命周期

创建阶段 getDefaultProps : 在创建类的时候调用,处理props的默认值,getDefaultProps仅会被调用一次,这里的意思是无论你会创建多少个ReactElement,这个函...
  • pkaq_
  • pkaq_
  • 2016年04月29日 14:02
  • 3083

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

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

React Native 组件的生命周期

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

React Native生命周期整理

整理的React Native的生命周期。

React Native 中 component 生命周期

component的生命周期图 getDefaultProps object getDefaultProps() 执行过一次后,被创建的类会有缓存,映射的值会存在this.p...

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

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

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

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

Android手机录屏并制作Gif

做效果展示时经常需要一些Gif图来显示动态效果,我目前使用的方法是手机录屏生成视频文件,再通过第三方软件用视频文件生成动图。刚才制作了一个动图效果图如下:这里我使用的是adb的screenrecord...
  • dfqin
  • dfqin
  • 2016年01月20日 15:47
  • 4740

android-获取相册图片及部分手机崩溃问题修复

Android开发中经常会有获取相册图片的需求,实现这一功能也很简单,总共就两步操作。1.本地相册获取照片 Intent intent = new Intent(); intent.se...

Android之React Native 中组件的生命周期

React Native 中组件的生命周期 概述 就像 Android 开发中的 View 一样,React Native(RN) 中的组件也有生命周期(Lifecycle)。所谓生命周期,就是一...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Android React Native组件的生命周期
举报原因:
原因补充:

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