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, ...
随机推荐
- hdoj1051Wooden Sticks
/*这道题目是先要排序的,依照长度或者重量排都能够. 当长度(重量)同样时就依照重量(长度)排, 从大到小或从小到大都能够! 这里我懂的.没有问题! 排序之后,问题就能够简化,(如果依照长度不等 ...
- Codeforces Round #349 (Div. 2) D. World Tour 暴力最短路
D. World Tour A famous sculptor Cicasso goes to a world tour! Well, it is not actually a world-wid ...
- B1968 [Ahoi2005]COMMON 约数研究 数论
大水题,一分钟就做完了...直接枚举1~n就行了,然后在n中判断出现多少次. 题干: Description Input 只有一行一个整数 N(0 < N < 1000000). Outp ...
- 关于sql2008的数据库导入问题的收集
在下载一个源程序的时候,常常会一起下下来一个数据库,即一个.MDF文件和一个.LDF文件,那么我们如何添加到我们的SQL Server 2008中呢?下面是一些详细的步骤: 1.将.MDF和.LDF文 ...
- jQuery右键菜单contextMenu实例
URL: http://www.cnblogs.com/whitewolf/archive/2011/09/28/2194795.html http://www.blogjava.net/superc ...
- 利用道格拉斯·普客法(DP法)压缩矢量多边形(C++)
1.算法描述 经典的Douglas-Peucker算法(简称DP法)描述如下: (1)在曲线首尾两点A,B之间连接一条直线AB,该直线为曲线的弦: (2)得到曲线上离该直线段距离最大的点C,计算其与A ...
- 一篇个人感觉比较好的lua入门的文章
原文转自www.cppprog.com,由三篇文章组成 Lua是一个嵌入式的脚本语言,它不仅可以单独使用还能与其它语言混合调用.Lua与其它脚本语言相比,其突出优势在于: 1. 可扩展性.Lua的扩 ...
- Python笔记(十)——操作SQLServer
#encoding=utf-8 # 先通过如下命令安装模块 # pip install --trusted-host pypi.python.org pymssql # pip类似于RedHat里的y ...
- zgb老师关于java集合的总结
数组:存多个数据 操作不便集合(Collection ):存多个数据 管理多个数据 提供更为方便的操作Iterator:专门针对集合 进行迭代List:有序的 允许重复的元素ArrayList:底层数 ...
- 学习java的方式