react中setState方法到底是异步还是同步,其实这个是分在什么条件下是异步或者同步。

1.先来回顾一下react组件中改变state的几种方式:

import React, { Component } from 'react'

class Index extends Component {
state={
count:1
}
test1 = () => {
// 通过回调函数的形式
this.setState((state,props)=>({
count:state.count+1
}));
console.log('test1 setState()之后',this.state.count);
}
test2 = () => {
// 通过对象的方式(注意:此方法多次设置会合并且只调用一次!)
this.setState({
count:this.state.count+1
});
console.log('test2 setState()之后',this.state.count);
}
test3 = () => {
// 不能直接修改state的值,此方法强烈不建议!!!因为不会触发重新render
this.state.count += 1;
}
test4 = () => {
// 在第二个callback拿到更新后的state
this.setState({
count:this.state.count+1
},()=>{// 在状态更新且页面更新(render)后执行
console.log('test4 setState()之后',this.state.count);
});
}
render() {
console.log('render');
return (
<div>
<h1>currentState:{this.state.count}</h1>
<button onClick={this.test1}>测试1</button>
<button onClick={this.test2}>测试2</button>
<button onClick={this.test3} style={{color:'red'}}>测试3</button>
<button onClick={this.test4}>测试4</button>
</div>
)
}
}
export default Index;

2.setState()更新状态是异步还是同步:

需要判断执行setState的位置

同步:在react控制的回调函数中:生命周期钩子/react事件监听回调

import React, { Component } from 'react'

class Index extends Component {
state={
count:1
}
/*
react事件监听回调中,setState()是异步状态
*/
update1 = () => {
console.log('update1 setState()之前',this.state.count);
this.setState((state,props)=>({
count:state.count+1
}));
console.log('update1 setState()之后',this.state.count);
}
/*
react生命周期钩子中,setState()是异步更新状态
*/
componentDidMount() {
console.log('componentDidMount setState()之前',this.state.count);
this.setState((state,props)=>({
count:state.count+1
}));
console.log('componentDidMount setState()之后',this.state.count);
} render() {
console.log('render');
return (
<div>
<h1>currentState:{this.state.count}</h1>
<button onClick={this.update1}>测试1</button>
<button onClick={this.update2}>测试2</button>
</div>
)
}
}
export default Index;

异步:非react控制的异步回调函数中:定时器回调/原生事件监听回调/Promise

import React, { Component } from 'react'

class Index extends Component {
state={
count:1
}
/*
定时器回调
*/
update1 = () => {
setTimeout(()=>{
console.log('setTimeout setState()之前',this.state.count);//
this.setState((state,props)=>({
count:state.count+1
}));
console.log('setTimeout setState()之后',this.state.count);//
});
}
/*
原生事件回调
*/
update2 = () => {
const h1 = this.refs.count;
h1.onclick = () => {
console.log('onClick setState()之前',this.state.count);//
this.setState((state,props)=>({
count:state.count+1
}));
console.log('onClick setState()之后',this.state.count);//
}
}
/*
Promise回调
*/
update3 = () => {
Promise.resolve().then(value=>{
console.log('Promise setState()之前',this.state.count);//
this.setState((state,props)=>({
count:state.count+1
}));
console.log('Promise setState()之后',this.state.count);//
});
} render() {
console.log('render');
return (
<div>
<h1 ref='count'>currentState:{this.state.count}</h1>
<button onClick={this.update1}>测试1</button>
<button onClick={this.update2}>测试2</button>
<button onClick={this.update3}>测试3</button>
</div>
)
}
}
export default Index;

3.setState()多次调用的问题:

异步的setState()

(1)多次调用,处理方法:

setState({}):合并更新一次状态,只调用一次render()更新界面,多次调用会合并为一个,后面的值会覆盖前面的值。

setState(fn):更新多次状态,只调用一次render()更新界面,多次调用不会合并为一个,后面的值会覆盖前面的值。

import React, { Component } from 'react'

class Index extends Component {
state={
count:1
}
update1 = () => {
console.log('update1 setState()之前',this.state.count);
this.setState((state,props)=>({
count:state.count+1
}));
console.log('update1 setState()之后',this.state.count);
console.log('update1 setState()之前2',this.state.count);
this.setState((state,props)=>({
count:state.count+1
}));
console.log('update1 setState()之后2',this.state.count);
}
update2 = () => {
console.log('update2 setState()之前',this.state.count);
this.setState({
count:this.state.count+1
});
console.log('update2 setState()之后',this.state.count);
console.log('update2 setState()之前2',this.state.count);
this.setState({
count:this.state.count+1
});
console.log('update2 setState()之后2',this.state.count);
}
update3 = () => {
console.log('update3 setState()之前',this.state.count);
this.setState({
count:this.state.count+1
});
console.log('update3 setState()之后',this.state.count);
console.log('update3 setState()之前2',this.state.count);
this.setState((state,props)=>({
count:state.count+1
}));// 这里需要注意setState传参为函数模式时,state会确保拿到的是最新的值
console.log('update3 setState()之后2',this.state.count);
}
update4 = () => {
console.log('update4 setState()之前',this.state.count);
this.setState((state,props)=>({
count:state.count+1
}));
console.log('update4 setState()之后',this.state.count);
console.log('update4 setState()之前2',this.state.count);
this.setState({
count:this.state.count+1
});// 这里需要注意的是如果setState传参为对象且在最后,那么会与之前的setState合并
console.log('update4 setState()之后2',this.state.count);
}
render() {
console.log('render');
return (
<div>
<h1>currentState:{this.state.count}</h1>
<button onClick={this.update1}>测试1</button>
<button onClick={this.update2}>测试2</button>
<button onClick={this.update3}>测试3</button>
<button onClick={this.update4}>测试4</button>
</div>
)
}
}
export default Index;

(2)如何得到setState异步更新后的状态数据:

在setState()的callback回调函数中

4.react中常见的setState面试题(setState执行顺序)

import React, { Component } from 'react'
// setState执行顺序
class Index extends 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('setTimeout',this.state.count);// 10 => 6
this.setState({count:this.state.count+1});
console.log('setTimeout',this.state.count);// 12 => 7
});
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() {
console.log('render',this.state.count);// 1 => 0 // 4 => 3 // 5 => 4 // 7 => 5 // 9 => 6 // 11 => 7
return (
<div>
<h1>currentState:{this.state.count}</h1>
<button onClick={this.update1}>测试1</button>
<button onClick={this.update2}>测试2</button>
<button onClick={this.update3}>测试3</button>
<button onClick={this.update4}>测试4</button>
</div>
)
}
}
export default Index;

总结:react中setState()更新状态的2种写法

1)setState(updater,[callback])

updater:为返回stateChange对象的函数:(state,props)=>stateChange,接收的state和props都保证为最新

2)setState(stateChange,[callback])

stateChange为对象,callback是可选的回调函数,在状态更新且界面更新后才执行

注意:

对象是函数方式的简写方式

如果新状态不依赖于原状态,则使用对象方式;

如果新状态依赖于原状态,则使用函数方式;

如果需要在setState()后获取最新的状态数据,在第二个callback函数中获取

React中setState学习总结的更多相关文章

  1. React的setState学习及应用

    React的setState学习及应用 一:作用: setState() 将对组件 state 的更改排入队列,并通知 React 需要使用更新后的 state 重新渲染此组件及其子组件.这是用于更新 ...

  2. React中setState同步更新策略

    setState 同步更新 我们在上文中提及,为了提高性能React将setState设置为批次更新,即是异步操作函数,并不能以顺序控制流的方式设置某些事件,我们也不能依赖于this.state来计算 ...

  3. React中setState如何修改深层对象?

    在React中经常会使用到setState,因为在react生态中,state就是一切.在开发过程中,时长会在state中遇到一些比较复杂的数据结构,类似下面这样的: 这时需要我们修改list中obj ...

  4. React中setState的怪异行为 ——setState没有即时生效

    setState可以说是React中使用频率最高的一个函数了,我们都知道,React是通过管理状态来实现对组件的管理的,当this.setState()被调用的时候,React会重新调用render方 ...

  5. React中setState 什么时候是同步的,什么时候是异步的?

    class Example extends React.Component { constructor() { super(); this.state = { val: 0 }; } componen ...

  6. react中setState用法

    setState()更新状态的2种写法 setState(updater, [callback]), updater为返回stateChange对象的函数: (state, props) => ...

  7. React中setState注意事项

    setState是一个异步函数,异步获取数据 学习react在使用ref和setState操作DOM时会遇到的问题: ref获取ul结点元素 错误写法:得到的ul长度总是上一次输入后的长度 结果: 正 ...

  8. React中setState方法说明

    setState跟新数据是同步还是异步? setState跟新数据是异步的. 如何用代码表现出来是异步的. 点击按钮更新数据,然后去打印这个值看一下 setState跟新数据是异步的 class Fa ...

  9. 「React Native笔记」在React的 setState 中操作数组和对象的多种方法(合集)

    运用在React 中 setState的对象.数组的操作时是不能用类似array.push()等方法,因为push没有返回值,setState后会出现state变成Number,为了方便他人和自己查看 ...

随机推荐

  1. oracle日期时间范围查询

    Oracle的日期时间范围查询 字段为:字符串类型(char),长度为:10 SELECT * FROM testdatetime t WHERE = AND t.createdate >= ' ...

  2. Python 函数知识点整理

  3. convert svn repo to git

    https://john.albin.net/git/convert-subversion-to-git 1. 抓取Log 在linux 上做的,其余是在win上做的. 2. svn co svn:/ ...

  4. day20191106

    笔记: 一.#{}和${}的区别是什么 1)#{}是预编译处理,${}是字符串替换.2)Mybatis 在处理#{}时,会将 sql 中的#{}替换为?号,调用 PreparedStatement 的 ...

  5. Machine Learning In Action 第二章学习笔记: kNN算法

    本文主要记录<Machine Learning In Action>中第二章的内容.书中以两个具体实例来介绍kNN(k nearest neighbors),分别是: 约会对象预测 手写数 ...

  6. Ansible 常见模块介绍

    目录 Ansible 常见模块介绍 ping 模块 command 模块 cron 模块 user 模块 group 模块 copy 模块 file 模块 service 模块 shell 模块 sc ...

  7. mysql 安装报错集合

    mysql-5.6.39 源码编译安装报错 报错信息: /tmp/ccV858jD.s: Assembler messages: /tmp/ccV858jD.s: Fatal error: can't ...

  8. centos7 安装wps

    # cat /etc/redhat-release CentOS Linux release 7.6.1810 (Core) # cat /proc/version Linux version 3.1 ...

  9. Spring Boot 2.0 学习笔记(一)——JAVA EE简介

    本章内容:JAVA EE>Spring>Spring Boot 一.JAVA EE简介 1.1 Java ee优点:结束了Web开发的技术无序状态,让程序员.架构师用同一种思维去思考如何架 ...

  10. Cannot read property 'nodeType' of null; audio元素默认样式下载按钮

    1.chrome-->console抛出如下错误: Uncaught TypeError: Cannot read property 'nodeType' of null 错误原因:从stack ...