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. 启动BIOS虚拟化

    启动BIOS虚拟化 学习了:https://jingyan.baidu.com/article/335530daa55d7e19cb41c3c2.html securable.exe下载地址:http ...

  2. UVa 10465 Homer Simpson(DP 全然背包)

     题意 霍默辛普森吃汉堡  有两种汉堡  一中吃一个须要m分钟  还有一种吃一个须要n分钟  他共同拥有t分钟时间    要我们输出他在尽量用掉全部时间的前提下最多能吃多少个汉堡  假设时间无法用 ...

  3. Light oj 1251 - Forming the Council 【2-sat】【推断是否存在可行解 + 反向拓扑输出可行解】

    1251 - Forming the Council problem=1251" style="color:rgb(79,107,114)"> PDF (Engli ...

  4. # 从零開始搭建Hadoop2.7.1的分布式集群

    Hadoop 2.7.1 (2015-7-6更新),Hadoop的环境配置不是特别的复杂,可是确实有非常多细节须要注意.不然会造成很多配置错误的情况.尽量保证一次配置正确防止重复改动. 网上教程有非常 ...

  5. Linux控制台版本号2048

    在Github上看到一个荷兰人写的linux控制台版的2048,用的C语言.感觉非常有意思. 原网址在这里. 读了一下他的源代码,感觉写的不错.就厚着脸皮加了一些中文凝视,源代码例如以下: /* == ...

  6. int*与(int*)的差别

    晚上被问到一个C++的问题: int **pa=new int* [5]; int *pb=new (int*)[5]; 上面两行代码的差别是什么? 分析与实验结果例如以下: (1)第一行代码能够在V ...

  7. luogu1120 小木棍【数据加强版】 暴力剪枝

    题目大意 乔治有一些同样长的小木棍,他把这些木棍随意砍成几段,直到每段的长都不超过50.现在,他想把小木棍拼接成原来的样子,但是却忘记了自己开始时有多少根木棍和它们的长度.给出每段小木棍的长度,编程帮 ...

  8. hdoj--1829--A Bug's Life(带权并查集)

    A Bug's Life Time Limit: 15000/5000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) To ...

  9. hiho一下第76周《Suzhou Adventure》

    我是菜鸡,我是菜鸡,我是菜鸡....重要的事说三遍 算是第一次做树形dp的题吧,不太难.. 园林构成一棵树,root为1,Hi从root出发,有k个园林必须玩,每个园林游玩后会得到权值w[i],最多玩 ...

  10. 腾讯新闻多图jQuery相册展示效果代码

    腾讯新闻多图jQuery相册代码,带左右切换箭头,带缩略图,可左右切换,点击缩略图展示原图. 在线演示本地下载