setState同步异步场景

React通过this.state来访问state,通过this.setState()方法来更新state,当this.setState()方法被调用的时候,React会重新调用render方法来重新渲染UI。相比较于在使用Hooks完成组件下所需要的心智负担,setState就是在使用class完成组件下所需要的心智负担,当然所谓的心智负担也许叫做所必须的基础知识更加合适一些。

描述

setState只在合成事件和生命周期钩子函数中是异步的,而在原生事件中都是同步的,简单实现一个React Class TS例子。

import React from "react";
import "./styles.css"; interface Props{}
interface State{
count1: number;
count2: number;
count3: number;
}
export default class App extends React.Component<Props, State>{
constructor(props: Props){
super(props);
this.state = {
count1: 0,
count2: 0,
count3: 0
}
} incrementAsync = () => {
console.log("incrementAsync before setState", this.state.count1);
this.setState({
count1: this.state.count1 + 1
});
console.log("incrementAsync after setState", this.state.count1);
}
incrementSync = () => {
setTimeout(() => {
console.log("incrementSync before setState", this.state.count2);
this.setState({
count2: this.state.count2 + 1
});
console.log("incrementSync after setState", this.state.count2);
},0);
}
incrementAsyncFn = () => {
console.log("incrementAsyncFn before setState", this.state.count3);
this.setState({
count3: this.state.count3 + 1
},
() => {
console.log("incrementAsyncFn after.1 setState", this.state.count3);
}
);
this.setState(state => {
console.log("incrementAsyncFn after.2 setState", state.count3);
return {count3: state.count3}
});
}
render(){
return <div>
<button onClick={this.incrementAsync}>异步</button>
<button onClick={this.incrementSync}>同步</button>
<button onClick={this.incrementAsyncFn}>异步函数参数</button>
</div>
}
}

以此点击三个按钮的话,可以得到以下输出。

incrementAsync before setState 0
incrementAsync after setState 0
incrementSync before setState 0
incrementSync after setState 1
incrementAsyncFn before setState 0
incrementAsyncFn after.2 setState 1
incrementAsyncFn after.1 setState 1

首先看incrementAsync的结果,在这里我们可以看出,在合成事件调用setState之后,this.state是无法立即得到最新的值。

对于incrementSync的结果,在非合成事件的调用时,this.state是可以立即得到最新的值的,例如使用addEventListenersetTimeoutsetInterval等。

对于incrementAsyncFn的两个结果,首先来说after.2的结果,对于this.state也是可以得到最新的值的,如果你需要基于当前的state来计算出新的值,那么就可以通过传递一个函数,而不是一个对象的方式来实现,因为setState的调用是分批的,所以通过传递函数可以链式地进行更新,当然前提是需要确保它们是一个建立在另一个之上的,也就是说传递函数的setState的值是依赖于上次一的SetState的,对于after.1的结果,setState函数的第二个参数是一个回调函数,在setState批量更新完成后可以拿到最新的值,而after.2也是属于批量更新需要调用的函数,所以after.1会在after.2后执行。

原理

React将其实现为异步的动机主要是性能的考量,setState的异步并不是说内部由异步代码实现,其实本身执行的过程和代码都是同步的,只是合成事件和生命周期钩子函数的调用顺序在批处理更新之前,导致在合成事件和生命周期钩子函数中没法立马拿到更新后的值,形式了所谓的异步,实际上是否进行批处理是由其内部的isBatchingUpdates的值来决定的。

setState依赖于合成事件,合成事件指的是React并不是将click等事件直接绑定在DOM上面,而是采用事件冒泡的形式冒泡到顶层DOM上,类似于事件委托,然后React将事件封装给正式的函数处理运行和处理。说完了合成事件再回到setStatesetState的批量更新优化也是建立在合成事件上的,其会将所有的setState进行批处理,如果对同一个值进行多次 setStatesetState的批量更新策略会对其进行覆盖,取最后一次的执行,如果是同时setState多个不同的值,在更新时也会对其进行合并批量更新,而在原生事件中,值会立即进行更新。

采用批量更新,简单来说就是为了提升性能,因为不采用批量更新,在每次更新数据都会对组件进行重新渲染,举个例子,让我们在一个方法内重复更新一个值。

this.setState({ msg: 1 });
this.setState({ msg: 2 });
this.setState({ msg: 3 });

事实上,我们真正想要的其实只是最后一次更新而已,也就是说前三次更新都是可以省略的,我们只需要等所有状态都修改好了之后再进行渲染就可以减少一些性能损耗。还有一个例子,如果更改了N个状态,其实只需要一次setState就可以将DOM更新到最新,如果我们更新多个值。

this.setState({ msg: 1 });
this.setState({ age: 2 });
this.setState({ name: 3 });

此处我们分三次修改了三种状态,但其实React只需要渲染一次,在setState批处理之后会将其合并,并进行一次re-render就可以将整个组件的DOM更新到最新,根本不需要关心这个setState到底是从哪个具体的状态发出来的。

那么还有一个问题,首先我们可以认同进行批处理更新对我们的性能是有益的,例如ChildParent都调用setState,我们不需要重新渲染Child两次。但是此时我们可能会想到一个问题,为什么不能如同Vue一样,Vue是在值更新之后触发setter然后进行更新,更新的过程同样也是采用异步渲染,也会将所有触发Watcherupdate进行去重合并再去更新视图,也就是说Vue是立即修改了值,而后再去更新视图的。也就是说,相比较于React,为什么不能在同样做批处理的情况下,立即将setState更新写入this.state而不等待协调结束。

任何一种解决方案都有权衡,对于Vue来说因为其是通过劫持了数据的setter过程,在使用的也是直接使用=直接赋值的,而在赋值之后进行视图的更新也是一个自然的过程,如果类似于React一样在=之后这个值依然没有变化,在直觉上是非常不符合常理的,虽然Vue是通过劫持setter实现的视图更新,但是做到如同React一样并不是不可能的,这是Vue采用的解决方案上的权衡,当然这只是可能的一个理由,说是问题的权衡,实际上还是需要对比React来看,对于React中要处理的问题,Vue自然会有自己解决方案的权衡,归根到底还是框架的设计哲学的问题。对于上面提出的在同样做批处理的情况下,立即将setState更新写入this.state而不等待协调结束的这个问题,dan给予了两个理由,在此简作总结,完整的英文版本还请看参考中的github issue

保证内部数据统一

即使state是同步更新的,但props是不会的,在重新渲染父组件之前,无法知道props,如果同步执行此操作,批处理就会消失。现在React提供的对象statepropsrefs在内部是一致的。这意味着如果只使用这些对象,则可以保证它们引用完全协调的树,即使它是该树的旧版本。当仅使用state时,同步刷新的模式将起作用。

console.log(this.state.value); // 0
this.setState({ value: this.state.value + 1 });
console.log(this.state.value); // 1
this.setState({ value: this.state.value + 1 });
console.log(this.state.value); // 2

但是,假设需要提升此状态以在几个组件之间共享,因此将其移动到父级,也就是说有props参与到了传值,那么同步setState模式就会有问题,此时将state提升到了父组件,利用props将值传导子组件。

console.log(this.props.value); // 0
this.props.onIncrement();
console.log(this.props.value); // 0
this.props.onIncrement();
console.log(this.props.value); // 0

这是因为在这个解决方案中,this.state会立即刷新,而this.props不会,而且我们不能在不重新渲染父对象的情况下立即刷新this.props,这意味着我们将不得不放弃批处理的策略。还有更微妙的情况说明这如何破坏一致性的,例如这种方案正在混合来自props尚未刷新和state建议立即刷新的数据以创建新状态。在React中,this.statethis.props都只在协调和刷新之后更新,所以你会在refactoring之前和之后看到0被打印出来。这使得提升状态安全。在某些情况下这可能会带来不便,特别是对于来自更多OO背景的人来说,他们只想多次改变状态,而不是考虑如何在一个地方表示完整的状态更新,我可以理解这一点,尽管我确实认为从调试的角度来看,保持状态更新的集中更加清晰。总而言之,React模型并不总是会产生最简洁的代码,但它在内部是一致的,并确保提升状态是安全的。

启用并发更新

从概念上讲React的行为就好像每个组件都有一个更新队列,我们在这里讨论是否同步刷新state有一个前提那就是我们默认更新节点是遵循特定的顺序的,但是按默认顺序更新组件在以后的react中可能就变了。对于现在我们一直在谈论的异步渲染,我承认我们在传达这意味着什么方面做得不是很好,但这就是研发的本质:你追求一个在概念上看起来很有前途的想法,但只有在花了足够的时间之后才能真正理解它的含义。

对于这个理由,是React发展的一个方向。我们一直在解释异步渲染的一种方式是React可以根据setState()调用的来源分配不同的优先级:事件处理程序、网络响应、动画等。例如你现在正在打字,那么TextBox组件需要实时的刷新,但是当你在输入的时候,来了一个信息,这个时候可能让信息的渲染延迟到某个阈值,而不是因为阻塞线程而让输入卡顿。如果我们让某些更新具有较低优先级,我们可以将它们的渲染分成几毫秒的小块,这样用户就不会注意到它们。异步rendering不仅仅是性能上的优化,我们认为这是React组件模型可以做什么的根本性转变。例如,考虑从一个屏幕导航到另一个屏幕的情况,通常会在渲染新屏幕时显示一个导航器,但是如果导航速度足够快,闪烁并立即隐藏导航器会导致用户体验下降,更糟糕的是如果有多个级别的组件具有不同的异步依赖项例如数据、代码、图像等,您最终会得到一连串短暂闪烁的导航器。由于所有的DOM重排,这既在视觉上令人不快,又使您的应用程序在实践中变慢。如果当您执行一个简单的setState()来呈现不同的视图时,我们可以开始在后台呈现更新后的视图。如果您自己不编写任何协调代码,您可以选择在更新时间超过某个阈值时显示导航器,否则当整个新子树的异步依赖项是时让React执行无缝转换使满意。请注意,这只是可能的,因为this.state不会立即刷新,如果它被立即刷新,我们将无法开始在后台渲染视图的新版本,而旧版本仍然可见且可交互,他们独立的状态更新会发生冲突。

每日一题

https://github.com/WindrunnerMax/EveryDay

参考

https://www.jianshu.com/p/cc12e9a8052c
https://juejin.cn/post/6844903636749778958
https://zh-hans.reactjs.org/docs/faq-state.html
https://blog.csdn.net/zz_jesse/article/details/118282921
https://blog.csdn.net/weixin_44874595/article/details/104270057
https://github.com/facebook/react/issues/11527#issuecomment-360199710

setState同步异步场景的更多相关文章

  1. 深入剖析setState同步异步机制

    关于 setState setState 的更新是同步还是异步,一直是人们津津乐道的话题.不过,实际上如果我们需要用到更新后的状态值,并不需要强依赖其同步/异步更新机制.在类组件中,我们可以通过thi ...

  2. 【测试】Gunicorn , uWSGI同步异步测试以及应用场景总结

    最近使用uwsgi出了一些问题,于是测试下Gunicorn测试对比下 环境 一颗cpu 1g内存 Centos系统 Django作为后端应用,Gunicorn默认模式和异步模式,响应基本是无阻塞类型 ...

  3. React中setState同步更新策略

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

  4. GCD的同步异步串行并行、NSOperation和NSOperationQueue一级用dispatch_once实现单例

    转:http://www.tuicool.com/articles/NVVnMn (1)GCD实现的同步异步.串行并行. ——同步sync应用场景:用户登录,利用阻塞 ——串行异步应用场景:下载等耗时 ...

  5. 【转载】高性能IO设计 & Java NIO & 同步/异步 阻塞/非阻塞 Reactor/Proactor

    开始准备看Java NIO的,这篇文章:http://xly1981.iteye.com/blog/1735862 里面提到了这篇文章 http://xmuzyq.iteye.com/blog/783 ...

  6. {Python之进程} 背景知识 什么是进程 进程调度 并发与并行 同步\异步\阻塞\非阻塞 进程的创建与结束 multiprocess模块 进程池和mutiprocess.Poll

    Python之进程 进程 本节目录 一 背景知识 二 什么是进程 三 进程调度 四 并发与并行 五 同步\异步\阻塞\非阻塞 六 进程的创建与结束 七 multiprocess模块 八 进程池和mut ...

  7. linux基础编程:IO模型:阻塞/非阻塞/IO复用 同步/异步 Select/Epoll/AIO(转载)

      IO概念 Linux的内核将所有外部设备都可以看做一个文件来操作.那么我们对与外部设备的操作都可以看做对文件进行操作.我们对一个文件的读写,都通过调用内核提供的系统调用:内核给我们返回一个file ...

  8. 【iOS开发-91】GCD的同步异步串行并行、NSOperation和NSOperationQueue一级用dispatch_once实现单例

    (1)GCD实现的同步异步.串行并行. --同步sync应用场景:用户登录,利用堵塞 --串行异步应用场景:下载等耗时间的任务 /** * 由于是异步.所以开通了子线程.可是由于是串行队列,所以仅仅须 ...

  9. 消息/事件, 同步/异步/协程, 并发/并行 协程与状态机 ——从python asyncio引发的集中学习

    我比较笨,只看用await asyncio.sleep(x)实现的例子,看再多,也还是不会. 已经在unity3d里用过coroutine了,也知道是“你执行一下,主动让出权限:我执行一下,主动让出权 ...

随机推荐

  1. 2022寒假集训day5

    day5 五道栈的题加上字符串. 单调队列. T1 表达式括号匹配   洛谷P1739 题目描述 假设一个表达式有英文字母(小写).运算符(+,-,*,/)和左右小(圆)括号构成,以"@&q ...

  2. uos系统安装tree

    apt install tree 提示无法安装软件包 执行apt update 然后执行apt install tree

  3. 申请Google AdSense联盟(还没有通过)

    最近我把我的博客移动到了我自己搭建的一个网站上这里,想申请goole联盟,但是连续申请了今天都没有被通过 不知道什么原因,goole没有有回复就告诉你不通过,这让我摸不到头脑, 我网站用的是hexo搭 ...

  4. git推送项目到github并使用gitee做镜像仓库

    2022最新版github入门教程,教你如何一步步创建自己的github账号并初始化仓库,然后使用git工具配置个人工作环境.配合gitee仓库,作为github的镜像仓库使用.这篇文章很基础,对萌新 ...

  5. Linux基础:VLAN篇

    一.二层基础知识 1.1 vlan介绍 本小节重点: vlan的含义 vlan的类型 交换机端口类型 vlan的不足 1.1.1 vlan的含义 局域网LAN的发展是VLAN产生的基础,因而先介绍一下 ...

  6. time模块以及datetime模块

    内容概要 time模块 **timestamp时间戳 **struct_time结构化时间 **format time格式化时间 datetime模块 **date **time **datetime ...

  7. 私有化轻量级持续集成部署方案--07-私有NPM仓库-Verdaccio

    提示:本系列笔记全部存在于 Github, 可以直接在 Github 查看全部笔记 对于个人来说,私有NPM仓库 作用性基本很小,但是对于企业,私有NPM仓库 可以保护代码暴露,具有很大的意义. 也是 ...

  8. Python中读写文件三部曲

    写入文件:要把第二个参数 'r' 改成 'w' ,表示write,即以写入的模式打开文件;  往文件中写入内容,使用write()函数. 例子如下:注意 'w' 写入模式会暴力清空掉原有文件,然后再写 ...

  9. 思迈特软件Smartbi发展再提速,完成B+轮过亿战略融资

    2021年4月,思迈特软件(Smartbi)宣布完成亿级B+轮战略融资,本轮投资方为领先的全球企业级数据分析和组织智能服务平台提供商--明略科技.此前,思迈特软件曾先后获得来自价值资本.方广资本的数千 ...

  10. 别再用 Redis List 实现消息队列了,Stream 专为队列而生

    上回说到使用 Redis 的 List 实现消息队列有很多局限性,比如: 没有良好的 ACK 机制: 没有 ConsumerGroup 消费组概念: 消息堆积. List 是线性结构,想要查询指定数据 ...