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 ==&gt; 0

  this.setState(state =&gt; ({count: state.count + 1}))

  this.setState(state =&gt; ({count: state.count + 1}))

  console.log(this.state.count) // 3 ==&gt; 0

  setTimeout(() =&gt; {

    this.setState({count: this.state.count + 1})

    console.log('timeout', this.state.count) // 10 ==&gt; 6

    this.setState({count: this.state.count + 1})

    console.log('timeout', this.state.count) // 12 ==&gt; 7

  }, 0)

  Promise.resolve().then(value =&gt; {

    this.setState({count: this.state.count + 1})

    console.log('promise', this.state.count)  // 6 ==&gt;4

    this.setState({count: this.state.count + 1})

    console.log('promise', this.state.count) // 8 ==&gt; 5

  })

}

render() {

  const count = this.state.count

  console.log('render', count)  // 1 ==&gt; 0   4 ==&gt;3   5 ==&gt;4  7 ==&gt;5  9 ==&gt;6  11 ==&gt;7

  return (

    &lt;div&gt;

      &lt;p&gt;{count}&lt;/p&gt;

    &lt;/div&gt;

  )

}

}
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是一个异步函数,异步获取数据学习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 是组件对内的接口.组件内可以引用其他组件,组件之间的引用形成了一个树状结构(组件树),如果下 ...
React 中的this&period;setState
在react中如何修改state中的数据第一种写法:this.setState() 参数1:对象需要修改的数据参数2:回调 this.setState是一 ...

随机推荐

XStream xml 解析框架使用笔记
1. xml的标签可以映射为类.类成员变量 2. 有子标签的标签映射为类,没有子标签的便签映射为类成员变量 3. 类名.类成员变量名如与标签名不一致需要通过注解或代码设置别名 // 类名 @XStre ...
WebRTC手记之框架与接口
转载请注明出处:http://www.cnblogs.com/fangkm/p/4370492.html 上一篇文章简单地介绍了下WebRTC的协议流程,这一篇就开始介绍框架与接口. 一提到框架,本能 ...
【Evaluate Reverse Polish Notation】cpp
题目: Evaluate the value of an arithmetic expression in Reverse Polish Notation. Valid operators are + ...
深入浅出ES6（十五）：子类 Subclassing
作者 Jason Orendorff github主页 https://github.com/jorendorff 在之前的文章<深入浅出ES6(十三):类 Class>中,我们一起深 ...
boost中asio网络库多线程并发处理实现，以及asio在多线程模型中线程的调度情况和线程安全。
1.实现多线程方法: 其实就是多个线程同时调用io_service::run for (int i = 0; i != m_nThreads; ++i) { boo ...
mac eclipse svn subeclipse&colon; Failed to load JavaHL Library&period;
Failed to load JavaHL Library. These are the errors that were encountered: no libsvnjavahl-1 in java ...
C++重载输入流复习
C++重载输入流 #include <bits/stdc++.h> using namespace std; struct Point { int x, y; Point(int xx, ...
10&lowbar;bash&lowbar;变量&lowbar;条件判断及运算&lowbar;sed&lowbar;循环
shell编程: 编译器.解释器编程语言:机器语言.汇编语言.高级语言静态语言:编译型语言强类型(变量):变量在使用前,必须事先声明,甚至还需要初始化事先转换成可执行格式 C/C++.C#.Ja ...
java问题
Collection 和 Collections的区别? Collection是集合类的上级接口,继承与他的接口主要有Set 和List. Collections是针对集合类的一个帮助类,他提供一系列 ...
很清晰的解读i2c协议【转】
转自:https://blog.csdn.net/weixin_41718085/article/details/79376823 转载:http://dpinglee.blog.163.com/bl ...