react中setState用法
setState()更新状态的2种写法
- setState(updater, [callback]),
updater为返回stateChange对象的函数: (state, props) => stateChange
接收的state和props被保证为最新的 - setState(stateChange, [callback])
stateChange为对象,
callback是可选的回调函数, 在状态更新且界面更新后才执行 - 总结:
对象方式是函数方式的简写方式
如果新状态不依赖于原状态 ===> 使用对象方式
如果新状态依赖于原状态 ===> 使用函数方式
如果需要在setState()后获取最新的状态数据, 在第二个callback函数中读取
setState()更新状态是异步还是同步的?
- 执行setState()的位置?
在react控制的回调函数中: 生命周期勾子 / react事件监听回调
非react控制的异步回调函数中: 定时器回调 / 原生事件监听回调 / promise回调 - 异步 OR 同步?
react相关回调中: 异步
其它异步回调中: 同步
关于异步的setState()
- 多次调用, 如何处理?
setState({}): 合并更新一次状态, 只调用一次render()更新界面 ---状态更新和界面更新都合并了
setState(fn): 更新多次状态, 但只调用一次render()更新界面 ---状态更新没有合并, 但界面更新合并了 - 如何得到异步更新后的状态数据?
在setState()的callback回调函数中
面试题
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>03_setState()面试题</title>
</head>
<body>
<div id="example"></div>
<script type="text/javascript" src="./js/react.development.js"></script>
<script type="text/javascript" src="./js/react-dom.development.js"></script>
<script type="text/javascript" src="./js/babel.min.js"></script>
<script type="text/babel">
class StateTest extends React.Component {
state = {
count: 0,
}
componentDidMount() {
this.setState({count: this.state.count + 1})
this.setState({count: this.state.count + 1})
console.log(this.state.count) // 2 ==> 0
this.setState(state => ({count: state.count + 1}))
this.setState(state => ({count: state.count + 1}))
console.log(this.state.count) // 3 ==> 0
setTimeout(() => {
this.setState({count: this.state.count + 1})
console.log('timeout', this.state.count) // 10 ==> 6
this.setState({count: this.state.count + 1})
console.log('timeout', this.state.count) // 12 ==> 7
}, 0)
Promise.resolve().then(value => {
this.setState({count: this.state.count + 1})
console.log('promise', this.state.count) // 6 ==>4
this.setState({count: this.state.count + 1})
console.log('promise', this.state.count) // 8 ==> 5
})
}
render() {
const count = this.state.count
console.log('render', count) // 1 ==> 0 4 ==>3 5 ==>4 7 ==>5 9 ==>6 11 ==>7
return (
<div>
<p>{count}</p>
</div>
)
}
}
ReactDOM.render(<StateTest/>, document.getElementById('example'))
</script>
</body>
</html>
react中setState用法的更多相关文章
- React中setState学习总结
react中setState方法到底是异步还是同步,其实这个是分在什么条件下是异步或者同步. 1.先来回顾一下react组件中改变state的几种方式: import React, { Compone ...
- React中setState同步更新策略
setState 同步更新 我们在上文中提及,为了提高性能React将setState设置为批次更新,即是异步操作函数,并不能以顺序控制流的方式设置某些事件,我们也不能依赖于this.state来计算 ...
- React中setState如何修改深层对象？
在React中经常会使用到setState,因为在react生态中,state就是一切.在开发过程中,时长会在state中遇到一些比较复杂的数据结构,类似下面这样的: 这时需要我们修改list中obj ...
- React中setState的怪异行为 ——setState没有即时生效
setState可以说是React中使用频率最高的一个函数了,我们都知道,React是通过管理状态来实现对组件的管理的,当this.setState()被调用的时候,React会重新调用render方 ...
- React中setState 什么时候是同步的，什么时候是异步的？
class Example extends React.Component { constructor() { super(); this.state = { val: 0 }; } componen ...
- React中setState方法说明
setState跟新数据是同步还是异步? setState跟新数据是异步的. 如何用代码表现出来是异步的. 点击按钮更新数据,然后去打印这个值看一下 setState跟新数据是异步的 class Fa ...
- React中setState注意事项
setState是一个异步函数,异步获取数据 学习react在使用ref和setState操作DOM时会遇到的问题: ref获取ul结点元素 错误写法:得到的ul长度总是上一次输入后的长度 结果: 正 ...
- 「React Native笔记」在React的 setState 中操作数组和对象的多种方法（合集）
运用在React 中 setState的对象.数组的操作时是不能用类似array.push()等方法,因为push没有返回值,setState后会出现state变成Number,为了方便他人和自己查看 ...
- React中Props 和 State用法
React中Props 和 State用法 1.本质 一句话概括,props 是组件对外的接口,state 是组件对内的接口.组件内可以引用其他组件,组件之间的引用形成了一个树状结构(组件树),如果下 ...
随机推荐
- cookie实例---显示上一次访问的时间与java.lang.IllegalArgumentException: An invalid character [32] was present in the Cookie value
创建Cookie,名为lasttime,值为当前时间,添加到response中: 在A.jsp中获取请求中名为lasttime的Cookie: 如果不存在输出“您是第一次访问本站”,如果存在输出“您上 ...
- 箭头函数中可改变this作用域，回调函数用箭头函数this指向page，自定义事件用箭头函数this指向undefined
1.回调函数中,用箭头函数改变this的作用域 success: (res)=>{ this.setData({ //此时,this指向page页面 ... }) } 2.自定义事件中,如果使用 ...
- ESP8266烧录选项中的QIO 和 DIO解释
https://blog.csdn.net/recclay/article/details/78956580 看到的由烧录引起的QIO和DIO问题探索.. 所以一般选择DIO QIO -> Qu ...
- js排序--一道js数据结构题
给一个数组: [{ GroupMark: "", GroupName: "hao", SendTime: '123', SendContent: "1 ...
- 燕化迷你ACDP程序FEM / BDC
带有BMW FEM / BDC模块的Mini ACDP可通过ICP或OBP模式支持FEM / BDC IMMO键编程.与传统的接线方式相比,它们有什么区别? 方法1:通过其他设备通过焊接进行FEM / ...
- Quartz.NET 作业调度（一）：Test
Quartz.NET 是一个开源的作业调度框架,是 Java 作业调度框架 Quartz 的.NET 版本,对于周期性的任务,其作业和触发器的结合,极大的简化了代码的编写,大多时候我们只需要关注作业本 ...
- webuploader的一些体验
WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件.支持大文件分片并发上传. 具体api文档参考:http://fex.b ...
- Java基础__Integer类型中的自动装箱
Integer类型的自动装箱:就是Java自动将原始类型值转换成对应的对象,比如将int的变量转换成Integer对象,这个过程叫做装箱,反之将Integer对象转换成int类型值,这个过程叫做拆箱. ...
- $\LaTeX$数学公式大全8
$8\ Miscellaneous\ symbols$ $\infty$ \infty $\nabla$ \nabla $\partial$ \partial $\eth$ \eth $\clubsu ...
- 线程系列1--Java创建线程的几种方式及源码分析
线程--创建线程的几种方式及源码分析 开始整理下线程的知识,感觉这块一直是盲区,工作中这些东西一直没有实际使用过,感觉也只是停留在初步的认识.前段时间一个内推的面试被问到,感觉一脸懵逼.面试官说,我的 ...