React 手稿 - Component state
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>
)
}
}
定义
写在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>
);
}
}
数据单和向性
input
与div
中直接显示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的更多相关文章
- React手稿之State Hooks of Hooks
React Hooks React在16.7.0-alpha.0版本中提到了Hooks的概念,目前还是Proposal阶段. 官方也陈述,接下来的90%的工作会投入到React Hooks中. 从目前 ...
- [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. ...
- React手稿之 React-Saga
Redux-Saga redux-saga 是一个用于管理应用程序副作用(例如异步获取数据,访问浏览器缓存等)的javascript库,它的目标是让副作用管理更容易,执行更高效,测试更简单,处理故障更 ...
- 说说React组件的State
说说React组件的State React的核心思想是组件化的思想,应用由组件搭建而成, 而组件中最重要的概念是State(状态). 正确定义State React把组件看成一个状态机.通过与用户的交 ...
- React组件的State
React组件的State 1.正确定义State React把组件看成一个状态机.通过与用户的交互,实现不同状态,然后渲染UI,让用户界面和数据保持一致.组件的任何UI改变,都可以从State的变化 ...
- [React] Compound Component (React.Children.map & React.cloneElement)
Imaging you are building a Tabs component. If looks like: <Tabs> <TabList> <Tab> o ...
- [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 ...
- React 修改获取state中的值
14===> 修改state中的值 不能够直接修改 state = { num: 10 } 如 this.state.num+=12; 不能够直接修改 错误 通过 this.setState({ ...
- React手稿 - Context
Context Context提供了除props之外的传参数的方式. Context是全局跨组件传递数据的. API React.createContext ``` const {Provider, ...
随机推荐
- 启动BIOS虚拟化
启动BIOS虚拟化 学习了:https://jingyan.baidu.com/article/335530daa55d7e19cb41c3c2.html securable.exe下载地址:http ...
- UVa 10465 Homer Simpson(DP 全然背包)
题意 霍默辛普森吃汉堡 有两种汉堡 一中吃一个须要m分钟 还有一种吃一个须要n分钟 他共同拥有t分钟时间 要我们输出他在尽量用掉全部时间的前提下最多能吃多少个汉堡 假设时间无法用 ...
- Light oj 1251 - Forming the Council 【2-sat】【推断是否存在可行解 + 反向拓扑输出可行解】
1251 - Forming the Council problem=1251" style="color:rgb(79,107,114)"> PDF (Engli ...
- # 从零開始搭建Hadoop2.7.1的分布式集群
Hadoop 2.7.1 (2015-7-6更新),Hadoop的环境配置不是特别的复杂,可是确实有非常多细节须要注意.不然会造成很多配置错误的情况.尽量保证一次配置正确防止重复改动. 网上教程有非常 ...
- Linux控制台版本号2048
在Github上看到一个荷兰人写的linux控制台版的2048,用的C语言.感觉非常有意思. 原网址在这里. 读了一下他的源代码,感觉写的不错.就厚着脸皮加了一些中文凝视,源代码例如以下: /* == ...
- int*与(int*)的差别
晚上被问到一个C++的问题: int **pa=new int* [5]; int *pb=new (int*)[5]; 上面两行代码的差别是什么? 分析与实验结果例如以下: (1)第一行代码能够在V ...
- luogu1120 小木棍【数据加强版】 暴力剪枝
题目大意 乔治有一些同样长的小木棍,他把这些木棍随意砍成几段,直到每段的长都不超过50.现在,他想把小木棍拼接成原来的样子,但是却忘记了自己开始时有多少根木棍和它们的长度.给出每段小木棍的长度,编程帮 ...
- 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 ...
- hiho一下第76周《Suzhou Adventure》
我是菜鸡,我是菜鸡,我是菜鸡....重要的事说三遍 算是第一次做树形dp的题吧,不太难.. 园林构成一棵树,root为1,Hi从root出发,有k个园林必须玩,每个园林游玩后会得到权值w[i],最多玩 ...
- 腾讯新闻多图jQuery相册展示效果代码
腾讯新闻多图jQuery相册代码,带左右切换箭头,带缩略图,可左右切换,点击缩略图展示原图. 在线演示本地下载