react native Component 生命周期

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

1.测试一

运行结果:

2.测试二


运行显示:

点击按钮前:

点击按钮后,结果如下:

结论:state发生改变,render执行一次

3.测试三

从测试二中可以知道,执行顺序为:1构造函数,2挂载前函数,3渲染函数,4.挂载函数。如果有state状态改变,那么再次渲染函数执行。
再看下面例子:
运行结果:

4.测试四
运行结果:

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

5.测试五

每次点击按钮都会执行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又会怎么样?

针对第一个问题,写了先得代码:

首次运行会看到:

后台会输出:

按下“改变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 组件的生命周期整理如下图: 如图,可以把组件生命周期大致分为三个阶段: 第一阶段:是组件第...

我是如何成为一名python大咖的?

人生苦短,都说必须python,那么我分享下我是如何从小白成为Python资深开发者的吧。2014年我大学刚毕业..

React Component Lifecycle(生命周期)

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

React Component生命周期

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

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

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

React Native 中组件的生命周期

详细介绍React Native中组件的声明周期

React Native 组件的生命周期

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

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

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

React Native 之生命周期

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

React Native 中组件的生命周期

React Native 中组件的生命周期28 OCTOBER 2015 on React-Native, Android 概述 就像 Android 开发中的 View 一样,React Nat...
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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