reactjs入门到实战(四)---- state详解
this.props
表示那些一旦定义,就不再改变的特性,而 this.state
是会随着用户互动而产生变化的特性。
组件免不了要与用户互动,React 的一大创新,就是将组件看成是一个状态机,一开始有一个初始状态,然后用户互动,导致状态变化,从而触发重新渲染 UI
组件其实是状态机(State Machines)
React 把用户界面当作简单状态机。把用户界面想像成拥有不同状态然后渲染这些状态,可以轻松让用户界面和数据保持一致。
React 里,只需更新组件的 state,然后根据新的 state 重新渲染用户界面(不要操作 DOM)。React 来决定如何最高效地更新 DOM。
State 工作原理
常用的通知 React 数据变化的方法是调用 setState(data, callback)
。这个方法会合并(merge) data
到 this.state
,并重新渲染组件。渲染完成后,调用可选的 callback
回调。大部分情况下不需要提供 callback
,因为 React 会负责把界面更新到最新状态。
哪些组件应该有 State?
大部分组件的工作应该是从 props
里取数据并渲染出来。但是,有时需要对用户输入、服务器请求或者时间变化等作出响应,这时才需要使用 State。
** 尝试把尽可能多的组件无状态化。** 这样做能隔离 state,把它放到最合理的地方,也能减少冗余,同时易于解释程序运作过程。
常用的模式是创建多个只负责渲染数据的无状态(stateless)组件,在它们的上层创建一个有状态(stateful)组件并把它的状态通过 props
传给子级。这个有状态的组件封装了所有用户的交互逻辑,而这些无状态组件则负责声明式地渲染数据。
哪些 应该 作为 State?
State 应该包括那些可能被组件的事件处理器改变并触发用户界面更新的数据。 真实的应用中这种数据一般都很小且能被 JSON 序列化。当创建一个状态化的组件时,想象一下表示它的状态最少需要哪些数据,并只把这些数据存入 this.state
。在 render()
里再根据 state 来计算你需要的其它数据。你会发现以这种方式思考和开发程序最终往往是正确的,因为如果在 state 里添加冗余数据或计算所得数据,需要你经常手动保持数据同步,不能让 React 来帮你处理。
哪些 不应该 作为 State?
this.state
应该仅包括能表示用户界面状态所需的最少数据。因此,它不应该包括:
- 计算所得数据: 不要担心根据 state 来预先计算数据 —— 把所有的计算都放到
render()
里更容易保证用户界面和数据的一致性。例如,在 state 里有一个数组(listItems),我们要把数组长度渲染成字符串, 直接在render()
里使用this.state.listItems.length + ' list items'
比把它放到 state 里好的多。 - React 组件: 在
render()
里使用当前 props 和 state 来创建它。 - 基于 props 的重复数据: 尽可能使用 props 来作为惟一数据来源。把 props 保存到 state 的一个有效的场景是需要知道它以前值的时候,因为未来的 props 可能会变化。
- 栗子:
<div id="example"></div>
<script type="text/babel">
var Count = React.createClass({
getInitialState:function(){
return{
count:
}
}, handleClick:function(){
this.setState({count:this.state.count + });
}, render:function(){
return (
<div>
<a onClick={this.handleClick}>YOU have clicked {this.state.count} times</a>
</div>
);
} });
ReactDOM.render(
<Count />,
document.getElementById('example')
)
</script>
reactjs入门到实战(四)---- state详解的更多相关文章
- SVN与TortoiseSVN实战:补丁详解
硬广:<SVN与TortoiseSVN实战>系列已经写了五篇,第二篇<SVN与TortoiseSVN实战:标签与分支>和第三篇<SVN与TortoiseSVN实战:Tor ...
- SVN与TortoiseSVN实战:补丁详解(转)
硬广:<SVN与TortoiseSVN实战>系列已经写了五篇,第二篇<SVN与TortoiseSVN实战:标签与分支>和第三篇<SVN与TortoiseSVN实战:Tor ...
- C++11 并发指南四(<future> 详解二 std::packaged_task 介绍)
上一讲<C++11 并发指南四(<future> 详解一 std::promise 介绍)>主要介绍了 <future> 头文件中的 std::promise 类, ...
- 【转】Zabbix 3.0 从入门到精通(zabbix使用详解)
[转]Zabbix 3.0 从入门到精通(zabbix使用详解) 第1章 zabbix监控 1.1 为什么要监控 在需要的时刻,提前提醒我们服务器出问题了 当出问题之后,可以找到问题的根源 网站/ ...
- Farseer.net轻量级开源框架 入门篇:添加数据详解
导航 目 录:Farseer.net轻量级开源框架 目录 上一篇:Farseer.net轻量级开源框架 入门篇: 分类逻辑层 下一篇:Farseer.net轻量级开源框架 入门篇: 修改数据详解 ...
- UWP入门(七)--SplitView详解与页面跳转
原文:UWP入门(七)--SplitView详解与页面跳转 官方文档,逼着自己用英文看,UWP开发离不开官方文档 1. SplitView 拆分视图控件 拆分视图控件具有一个可展开/可折叠的窗格和一个 ...
- Qt零基础教程(四) QWidget详解篇
在博客园里面转载我自己写的关于Qt的基础教程,没次写一篇我会在这里更新一下目录: Qt零基础教程(四) QWidget详解(1):创建一个窗口 Qt零基础教程(四) QWidget详解(2):QWid ...
- Qt零基础教程(四)QWidget详解(3):QWidget的几何结构
Qt零基础教程(四) QWidget详解(3):QWidget的几何结构 这篇文章里面分析了QWidget中常用的几种几何结构 下图是Qt提供的分析QWidget几何结构的一幅图,在帮助的 Wind ...
- Java web 入门知识 及HTTP协议详解
Java web 入门知识 及HTTP协议详解 WEB入门 WEB,在英语中web即表示网页的意思,它用于表示Internet主机上供外界访问的资源. Internet上供外界访问的Web资 ...
- C++11 并发指南四(<future> 详解三 std::future & std::shared_future)
上一讲<C++11 并发指南四(<future> 详解二 std::packaged_task 介绍)>主要介绍了 <future> 头文件中的 std::pack ...
随机推荐
- [Reprint]C++普通函数指针与成员函数指针实例解析
这篇文章主要介绍了C++普通函数指针与成员函数指针,很重要的知识点,需要的朋友可以参考下 C++的函数指针(function pointer)是通过指向函数的指针间接调用函数.相信很多人对指向一般 ...
- 算法训练 区间k大数查询
http://lx.lanqiao.org/problem.page?gpid=T11 算法训练 区间k大数查询 时间限制:1.0s 内存限制:256.0MB 问题描述 给定一个 ...
- 从一简单程序看C语言内存分配
int main13(){ char buf[20]="aaaa"; char buf2[] = "bbbb"; char *p1 = "111111 ...
- 。。。mkdir与mkdirs的区别。。。
一直想知道他俩的区别,也一直忘记了,知道今天才没有放过这个机会! mkdir的用法是正创建一层目录,比如说在C盘下创建aa文件夹,c:\aa,这个aa是不存在的,这个话,是可以用mkdir创建的,但是 ...
- $.getJSON异步请求和同步请求
先说一下我遇到的问题吧,我之前的一个函数想调用上一个函数的返回值,但是它的返回值一直为空,后来翻了一些资料才明白是异步请求在作怪,不多说,看例子,这是我之前有返回值函数的代码: function ge ...
- Union与union all区别
Union因为要进行重复值扫描,所以效率低.如果合并没有刻意要删除重复行,那么就使用Union All 两个要联合的SQL语句 字段个数必须一样,而且字段类型要“相容”(一致): 如果我们需要将两个 ...
- PAT乙级 1026. 程序运行时间(15)
1026. 程序运行时间(15) 时间限制 200 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 CHEN, Yue 要获得一个C语言程序的运行时间, ...
- [Ubuntu] Ubuntu DNS服务器配置
服务器IP:10.68.19.61 操作系统:Ubuntu 13.04 DNS程序:Bind9 测试域名:mycloud.com 目标IP:10.68.19.134 配置步骤 1.安装BIND9程序包 ...
- 4项技巧使你不再为PHP中文编码苦恼
PHP程序设计中中文编码问题曾经困扰很多人,导致这个问题的原因其实很简单,每个国家(或区域)都规定了计算机信息交换用的字符编码集,如美国的扩展 ASCII 码,中国的 GB2312-80,日本的 JI ...
- SSAS更改默认端口号,使用非默认端口号的时候Olap连接字符串的格式
Sql server的Analysis Service服务默认使用的是2382或2383端口,但是实际上我们可以通过配置文件手动更改SSAS使用其它端口号. 修改SSAS使用端口号的方法如下,找到你的 ...