Component state

实例:

import React, { PureComponent } from 'react';

export default class extends PureComponent {

constructor(props) {

super(props);

this.state = { time: '' };

} componentDidMount() {

setInterval(() => {

const now = new Date();

let { time } = this.state;

const year = now.getFullYear();

const month = now.getMonth() + 1;

const day = now.getDate();

const hours = now.getHours();

const minutes = now.getMinutes();

const seconde = now.getSeconds();

time = ${0000${year}.slice(-4)}-${00${month}.slice(-2)}-${00${day}.slice(-2)} ${00${hours}.slice(-2)}:${00${minutes}.slice(-2)}:${00${seconde}.slice(-2)}

this.setState({ time });

}, 1000);

} render() {

return (

<div>{this.state.time}</div>

)

}

}

Timer 在线实例

定义

写在constructor函数中,是一个Object对象。一般情况下需要指定默认值,预防抛undefined.

使用

在组件中通过访问组件对象属性的方式。直接获取:this.state.time.
我们通常会先获取state数据,再渲然到页面,例如:

  render() {
const {time} = this.state;
return (
<div>{time}</div>
);
}

setState

先看一段代码:

import React, {PureComponent} from 'react';

export default class extends PureComponent {

constructor(props) {

super(props);

this.state = {name: 'world'};

} render() {

const {name} = this.state;

return (

<div>

<input defaultValue={name} name="name" />

<div>Holle, {name}!</div>

</div>

);

}

}

  • 数据单和向性

    inputdiv中直接显示name的内容,但是,在input中直接输入内容,div的显示不会改变。

    把这种组件也称为非受控性组件。

  • setState

    通过React提供了setState方法,来实现state的修改。

    我们只要将上述的非受控性组件修改为受控性组件即可,如下:

     <input value={name} onChange={e => this.setState({name: e.target.value})} />

    使用setState方法需要注意以下几点:

    • 异步

      onChange () {
      this.setState({name: 'hasChanged'})
      console.log(this.state.name === 'hasChanged'); //false
      }
    • 合并

        this.state = {name: 'xiaoshouyi', address: 'beijing'};
      
      this.setState({address: 'xi an'});
      
      //not

      //this.setState({...this.state, addree: 'xi an'});

      //但是这种方式在对象修改的时候非常有用。 console.log(this.state) //{name: 'xiaoshouyi', address: 'xi an'}

      类似与Object.assgin()

    • 回调

      this.setState({name: 'changed'}, () => {
      console.log(this.state.name); // changed
      });

非控组件 在线实例

受控组件 在线实例

推荐阅读《React 手稿》

原文地址:https://segmentfault.com/a/1190000016946490

React 手稿 - Component state的更多相关文章

  1. React手稿之State Hooks of Hooks

    React Hooks React在16.7.0-alpha.0版本中提到了Hooks的概念,目前还是Proposal阶段. 官方也陈述,接下来的90%的工作会投入到React Hooks中. 从目前 ...

  2. [React] Update Component State in React With Ramda Lenses

    In this lesson, we'll refactor a React component to use Ramda lenses to update our component state. ...

  3. React手稿之 React-Saga

    Redux-Saga redux-saga 是一个用于管理应用程序副作用(例如异步获取数据,访问浏览器缓存等)的javascript库,它的目标是让副作用管理更容易,执行更高效,测试更简单,处理故障更 ...

  4. 说说React组件的State

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

  5. React组件的State

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

  6. [React] Compound Component (React.Children.map & React.cloneElement)

    Imaging you are building a Tabs component. If looks like: <Tabs> <TabList> <Tab> o ...

  7. [React] Keep Application State in Sync with Browser History

    Using pushState and passing route data via context allows our application to respond to route change ...

  8. React 修改获取state中的值

    14===> 修改state中的值 不能够直接修改 state = { num: 10 } 如 this.state.num+=12; 不能够直接修改 错误 通过 this.setState({ ...

  9. React手稿 - Context

    Context Context提供了除props之外的传参数的方式. Context是全局跨组件传递数据的. API React.createContext ``` const {Provider, ...

随机推荐

  1. spring5.0新特性

    spring5.0新特性 学习了:http://blog.csdn.net/u012562943/article/details/77449666 https://www.cnblogs.com/xu ...

  2. Android中验证输入是否为汉字及手机号,邮箱验证,IP地址可用port号验证

    1,验证是否为汉字 // 验证昵称 private boolean verifyNickname() { String nickname = edt_username.getText().toStri ...

  3. C/C++中字符串String及字符操作方法

    本文总结C/C++中字符串操作方法,还在学习中,不定期更新. .. 字符串的输入方法 1.单个单词能够直接用std::cin,由于:std::cin读取并忽略开头全部的空白字符(如空格,换行符,制表符 ...

  4. Cocos2d-x 3.0final 终结者系列教程02-开发环境的搭建

    本文主要以Mac平台和XCode5为基本系统环境和C++编程工具来介绍Cocos2d-x3.0final版的安装. 一.系统准备(预计要花掉半个月工资) MacBook Pro一台(本人的比較老.11 ...

  5. spark 按照key 分组 然后统计每个key对应的最大、最小、平均值思路——使用groupby,或者reduceby

    What you're getting back is an object which allows you to iterate over the results. You can turn the ...

  6. poj--2553--The Bottom of a Graph (scc+缩点)

    The Bottom of a Graph Time Limit : 6000/3000ms (Java/Other)   Memory Limit : 131072/65536K (Java/Oth ...

  7. [Swift]注册并购买加入Apple开发者计划。提示: “你的支付授权失败。请核对你的信息并重试,或尝试其他支付方式。请联系你的银行”

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  8. 本地sql文件导入mysql数据库

    mysql中配置my.ini interactive_timeout = 120 wait_timeout = 120 max_allowed_packet = 32M 导入sql运行命令 sourc ...

  9. 抽象工厂模式(AbsFactory)C++实现

    模式意图:提供一个创建一系列相关或相互依赖对象的接口,二无需指定他们具体的类. 效果: 分离了具体的类.     使  a.客户与类的实现分离  b.客户通过抽象接口操纵实例  c.产品的类名在实现中 ...

  10. 给WordPress的TinyMCE Advanced编辑器加上中文字体

    为TinyMCE编辑器增加中文字体并不复杂,只需要将将如下代码加到当前主题的functions.php文件中最后一个?>的前面即可: 不要忘记保存,然后更新一遍浏览器即可 //为TinyMCE编 ...