State(状态)
props
和state
。props
是在父组件中指定,而且一经指定,在被指定的组件的生命周期中则不再改变。 对于需要改变的数据,我们需要使用state
。般来说,你需要在constructor中初始化state
(译注:这是ES6的写法,早期的很多ES5的例子使用的是getInitialState方法来初始化state,这一做法会逐渐被淘汰),然后在需要修改时调用setState
方法。
import React, { Component } from 'react';
import { AppRegistry, Text, View } from 'react-native';
class Blink extends Component {
constructor(props) {
super(props);
this.state = { showText: true };
// 每1000毫秒对showText状态做一次取反操作
setInterval(() => {
this.setState({ showText: !this.state.showText });
}, 1000);
}
render() {
// 根据当前showText的值决定是否显示text内容
let display = this.state.showText ? this.props.text : ' ';
return (
<Text>{display}</Text>
);
}
}
class BlinkApp extends Component {
render() {
return (
<View>
<Blink text='I love to blink' />
<Blink text='Yes blinking is so great' />
<Blink text='Why did they ever take this out of HTML' />
<Blink text='Look at me look at me look at me' />
</View>
);
}
}
AppRegistry.registerComponent('BlinkApp', () => BlinkApp);
State(状态)的更多相关文章
- C++设计模式-State状态模式
State状态模式作用:当一个对象的内在状态改变时允许改变其行为,这个对象看起来像是改变了其类. UML图如下: State类,抽象状态类,定义一个接口以封装与Context的一个特定状态相关的行为. ...
- State状态设计模式
1.状态模式:改变对象的行为 一个用来改变类的(状态的)对象. 2:问题:当你自己实现 State 模式的时候就会碰到很多细节的问题,你必须根据自己的需要选择合适的实现方法, 比如用到的状态(Stat ...
- 程序设计模式 —— State 状态模式
我应该如何阅读? 本文将使用优雅的文字风格来告诉你什么是状态模式. 注意: 1.在阅读本文之前请保证你已经掌控了 面对对象的思想与 多态的基本概念,否则将难以理解. 2.本文实现将用C++实现,你不一 ...
- Spark Streaming揭秘 Day14 State状态管理
Spark Streaming揭秘 Day14 State状态管理 今天让我们进入下SparkStreaming的一个非常好用的功能,也就State相关的操作.State是SparkStreaming ...
- Vuex state 状态浅解
对于Vuex中的state里面的理解总是有些欠缺,机制似乎理解了.但是还有很多的不足,在这就先浅谈下自己的理解. vuex 机制中,定义了全局Store,在各个vue组件面的this.$store指向 ...
- State状态模式
1.简介 在日常开发中,某些对象的状态如果发生改变,对应的行为也将发生改变,那么如何在运行时根据对象的状态动态的改变对象的行为,同时不产生紧耦合关系(即使用if else或者swith所带来的紧耦合关 ...
- 设计模式---状态变化模式之state状态模式(State)
前提:状态变化模式 在组建构建过程中,某些对象的状态经常面临变化,如何对这些变化进行有效的管理?同时又维持高层模块的稳定?“状态变化”模式为这一个问题提供了一种解决方案. 典型模式 状态模式:Stat ...
- 原生 JavaScript 实现 state 状态管理系统
原生 JavaScript 实现 state 状态管理系统 Build a state management system with vanilla JavaScript | CSS-Tricks 在 ...
- 设计模式(20)--State(状态模式)--行为型
作者QQ:1095737364 QQ群:123300273 欢迎加入! 1.模式定义: 状态模式,又称状态对象模式(Pattern of Objects for States),状态模式 ...
- 设计模式21:State 状态模式(行为型模式)
State 状态模式(行为型模式) 动机(Motivation) 在软件构建过程中,某些对象的状态如果改变,其行为也会随之而发生变化,比如文档处于只读状态,其支持的行为和读写状态的行为就可能完全不同. ...
随机推荐
- EBS Technology Codelevel Checker (ETCC)
ETCC提供了两个脚本,用来帮助用户检测 E-Business Suite Release 12.2数据库和中间层是否安装了必须的补丁.官方强烈推荐使用. 1.checkDBpatch.sh 这个脚本 ...
- Anaconda安装与使用
bash Anaconda.....sh命令安装成功 安装位置:/home/amelie/anaconda2 修改路径:vi ~/.bashrc vi编辑器在最后写上:export PATH=/hom ...
- oauth协议
微博 : 新浪 腾讯 OAuth 新浪微博 APP开发 步骤:1.注册新浪开发者账号 获取以下信息 client_id 123456 标示应用身份的 唯一的 有的也叫App Key sec ...
- 纯CSS实现帅气的SVG路径描边动画效果(转载)
本文转载自: 纯CSS实现帅气的SVG路径描边动画效果
- Excel应该这么玩——3、命名表格:彻底改造公式
上一篇介绍了通过命名列将公式中的地址引用去掉,让公式更容易理解.但是之前的命名列只是针对单个表格的,如何引用其他表格的列是本篇的主要内容. 1.创建命名表格 命名表格的前提的创建表格,这个操作上一篇已 ...
- Hibernate Criteria Restrictions
HQL运算符 QBC运算符 含义 = Restrictions.eq() 等于equal <> Restrictions.ne() 不等于not equal > Restrict ...
- Centos6.5 安装 RabbitMQ3.6.1
Centos6.5 安装 RabbitMQ3.6.1 个人安装RabbitMQ总结: 安装编译工具 yum -y install make gcc gcc-c++ kernel-devel m4 nc ...
- # TypeScript 中如何确保 this 的正确性
问题 在 TS 里面 this 关键字一开始让我这个写 C# 的十分惊讶,比如下面的一段代码,注意 initBinding 方法 class Company { id:number; /** * 在点 ...
- “stdafx.h”: No such file or directory
“stdafx.h”: No such file or directory 一般原因是建工程的时候选择了空工程,然后添加现有源文件(含stdafx.cpp) 或者 修改了已有的stdafx.cpp 或 ...
- WordPress搬家教程:换空间与换域名
WordPress搬家教程:换空间与换域名 由于本人博客空间8月份已到期,便新购一个虚拟主机想进行WordPress搬家,于是特意在网上查了些WordPress搬家教程,进行了综合总结,并结合这次实操 ...