在类组件中添加本地状态(state):

  1、创建一个继承自 React.Component 类的 ES6 class 同名类;

  2、添加一个 类构造函数(class constructor) 初始化 this.state,注意我们如何将 props 传递给基础构造函数。

  3、添加一个名为 render() 的方法;    

  4、在render() 方法 用this.state.date。

class Clock extends React.Component {
constructor(props) {
super(props);
this.state = {date: new Date()};
} render() {
return (
<div>
<h1>Hello, world!</h1>
<h2>It is {this.state.date.toLocaleTimeString()}.</h2>
</div>
);
}
}

  注意点:

  1、不要直接修改 state(状态),用 setState() 代替。唯一可以分配 this.state 的地方是构造函数。

this.state.comment = 'Hello';// 错误
this.setState({comment: 'Hello'});// 正确

  2、state(状态) 更新可能是异步的
  React 为了优化性能,有可能会将多个 setState() 调用合并为一次更新。setState() 的格式,它可以接收一个对象或一个函数,第一个参数表示前一个状态,第二个参数表示应用更新时的 props 。为了避免异步更新引起的错误,可以给 setState()传函数
  3、数据向下流动
  state(状态) 被称为 本地状态 。 一个组件可以选择将 state(状态) 向下传递,作为其子组件的 props(属性)。任何 state(状态) 始终由某个特定组件所有,并且从该 state(状态) 导出的任何数据 或 UI 只能影响树中 “下方” 的组件。如果把组件树想像为 props(属性) 的瀑布,所有组件的 state(状态) 就如同一个额外的水源汇入主流,且只能随着主流的方向向下流动。

React-本地状态(state)的更多相关文章

  1. React入门---属性(state)-7

    state------>虚拟dom------>dom 这个过程是自动的,不需要触发其他事件来调用它. state中文理解:页面状态的的一个值,可以存储很多东西. 学习state的使用: ...

  2. react~props和state的介绍与使用

    props是参数的传递,从上层模块向下层模块进行拿传递:而state是提局域变量,一般在本模块内使用,props是不能改变的,而state可以通过setState去修改自身的值. props Reac ...

  3. 说说React组件的State

    说说React组件的State React的核心思想是组件化的思想,应用由组件搭建而成, 而组件中最重要的概念是State(状态). 正确定义State React把组件看成一个状态机.通过与用户的交 ...

  4. React组件的State

    React组件的State 1.正确定义State React把组件看成一个状态机.通过与用户的交互,实现不同状态,然后渲染UI,让用户界面和数据保持一致.组件的任何UI改变,都可以从State的变化 ...

  5. React的状态管理工具

    Mobx-React : 当前最适合React的状态管理工具   MobX 简单.可扩展的状态管理        MobX 是由 Mendix.Coinbase.Facebook 开源和众多个人赞助商 ...

  6. react的状态管理

    近两年前端技术的发展如火如荼,大量的前端项目都在使用或转向 Vue 和 React 的阵营, 由前端渲染页面的单页应用占比也越来越高,这就代表前端工作的复杂度也在直线上升,前端页面上展示的信息越来越多 ...

  7. React组件的state和props

    React组件的state和props React的数据是自顶向下单向流动的,即从父组件到子组件中,组件的数据存储在props和state中.实际上在任何应用中,数据都是必不可少的,我们需要直接的改变 ...

  8. Terraform状态State管理,让变更有记录

    我最新最全的文章都在南瓜慢说 www.pkslow.com,欢迎大家来喝茶! 简介 最近工作中用到了Terraform,权当学习记录一下,希望能帮助到其它人. Terraform系列文章如下: Ter ...

  9. React 三大属性state,props,refs以及组件嵌套的应用

    React 三大属性state,props,refs以及组件嵌套的应用 该项目实现了一个简单的表单输入添加列表的内容 代码如下 <!DOCTYPE html> <html> & ...

随机推荐

  1. vue-cli脚手架之webpack.base.conf.js

    webpack相关的重要配置文件将在这一节给出.webpack水很深啊^o^,在此先弄清楚原配文件内容的含义,后续可以自己根据实际情况配置. webpack.base.conf.js:配置vue开发环 ...

  2. React数据流和组件间的通信总结

    今天来给大家总结下React的单向数据流与组件间的沟通. 首先,我认为使用React的最大好处在于:功能组件化,遵守前端可维护的原则. 先介绍单向数据流吧. React单向数据流: React是单向数 ...

  3. kNN处理iris数据集-使用交叉验证方法确定最优 k 值

    基本流程: 1.计算测试实例到所有训练集实例的距离: 2.对所有的距离进行排序,找到k个最近的邻居: 3.对k个近邻对应的结果进行合并,再排序,返回出现次数最多的那个结果. 交叉验证: 对每一个k,使 ...

  4. mysql8 :客户端连接caching-sha2-password问题

    在安装mysql8的时候如果选择了密码加密,之后用客户端连接比如navicate,会提示客户端连接caching-sha2-password,是由于客户端不支持这种插件,可以通过如下方式进行修改: # ...

  5. 谷歌浏览器javascript错误提示插件

    JavaScript-Errors-Notifier_v2.1.7 下载地址 安装方法: http://chromecj.com/utilities/2014-09/181.html 设置方式:

  6. rows的参数

    ds.Tables[0].Rows[0][0].ToString()中的rows后边的那俩参数分别代表什么 第一个0表示行的索引(如果是0就表示第一行,1表示第二行……)第二个0表示列的索引(如果是0 ...

  7. emacs org-mode文件转html文件

    Table of Contents 1. 发布站点 by emacs org-mode 1.1 org-mode 自带的导出方法 1.2 批量导出 1.3 css 美化 1.4 导出html 1. 发 ...

  8. 网络流(四)dinic算法

    传送门: 网络流(一)基础知识篇 网络流(二)最大流的增广路算法 网络流(三)最大流最小割定理 网络流(四)dinic算法 网络流(五)有上下限的最大流 网络流(六)最小费用最大流问题 转自:http ...

  9. API与软件架构-接口

    http://blog.csdn.net/horkychen/article/details/46612899 从架构设计的角度来看(所谓的组成论),软件系统就是模块和接口. 模块(层次/组件)决定分 ...

  10. 布隆过滤BitMap原理

    一.问题引入 BitMap从字面的意思,很多人认为是位图,其实准确的来说,翻译成基于位的映射,怎么理解呢?举一个例子,有一个无序有界int数组{1,2,5,7},初步估计占用内存44=16字节,这倒是 ...