理解React如何实现批量状态更新

最新推荐文章于 2024-08-19 18:38:43 发布
最新推荐文章于 2024-08-19 18:38:43 发布
阅读量1.8k 收藏 3
点赞数 2
分类专栏： 前端 React 文章标签： react 前端 源码 事务 state
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/htxhtx123/article/details/106456844
版权
本文探讨了React如何实现批量状态更新以提升性能。通过Transaction或`ReactDOM.unstable_batchedUpdates`，React将多个setState操作合并，减少DOM更新次数。当setState在非Transaction环境中执行时，可能导致同步更新和性能下降。解决方案包括将更新合并到一个setState调用或使用批量更新方法。
摘要由CSDN通过智能技术生成

今天和大家聊一聊React如何实现批量状态更新。

引子

我们知道React的setState方法并不是同步执行的。

在React的生命周期中发生的多次setState的变更会进行合并，最终减少推送给浏览器的DOM变更次数，从而提升前端性能。

那么这部分到底是怎么实现的呢？我们来看下

Transaction

在React执行点击事件或者生命周期函数时，会使用一个Transaction对象将整个执行过程包裹成一个事务。

Transaction对象结构如下图所示

<pre>
 *                       wrappers (injected at creation time)
 *                                      +        +
 *                                      |        |
 *                    +-----------------|--------|--------------+
 *                    |                 v        |              |
 *                    |      +---------------+   |              |
 *                    |   +--|    wrapper1   |---|----+         |
 *                    |   |  +---------------+   v    |         |
最低0.47元/天 解锁文章
xinyue_htx
关注
专栏目录
react 学习(四) 批量更新及合成事件
weixin_41364787的博客
04-12 752
我们上一节了解了组件的更新机制，但是只是停留在表层上，例如我们的 setState 函数式同步执行的，我们的事件处理直接绑定在了 dom 元素上，这些都跟 react 自身的逻辑不符。本小节我们学习下数据的批量更新和 react 中的事件处理。 批量更新 回顾 上一节我们并行执行两个 setState 方法，从下图可知，两个函数同时执行了： handleClick = () => { this.setState({ number: this.state.number + 1, });
React 18 新特性（一）：自动批量更新
浮沉半生的博客
07-30 1808
本文介绍了 React 18 的自动批量更新特性，和之前版本的批量更新进行了对比。并且使用代码模拟了批量更新的不同实现思路。
从源码的角度看 React JS 中批量更新 State 的策略（下）
weixin_33921089的博客
04-20 146
这篇文章我们继续从源码的角度学习 React JS 中的批量更新 State 的策略，供我们继续深入学习研究 React 之用。 前置文章列表 深入理解 React JS 中的 setState 从源码的角度再看 React JS 中的 setState 从源码的角度看 React JS 中批量更新 State 的策略（上） 1. batchingStrategy 策略 现在我们开始来看 b...
【React Hooks - useState状态批量更新原理】
最新发布
weixin_44273311的博客
08-19 969
通过demo示例结合Chrome调试的方式从源码角度介绍了React17、React18对于状态批量处理的原理
React 批量更新
weixin_43484007的博客
06-03 969
一些组件也许想要更新状态来响应同一事件。下面这个例子是假设的，但是却说明了一个常见的模式： 当事件被触发时，子组件的 onClick 首先被触发（同时触发了它的 setState ）。然后父组件在它自己的 onClick 中调用 setState 。如果 React 立即重渲染组件以响应 setState 调用，最终我们会重渲染子组件两次： 第一次 Child 组件渲染是浪费的。并且我们也不会让 React 跳过 Child 的第二次渲染因为 Parent 可能会传递不同的数据由于其自身的状态更新。这就是为
React的 setState 批量更新的原理
weixin_45452083的博客
06-27 1715
React的 setState 批量更新的原理 背景 关于React 中的setState，我们常常会看见一个问题，“React中的setState是同步还是异步的？”我们经常会这样答：可异步，可同步；这篇文章就来解释一下其中的原因 现象 我们先看看，在什么样的场景中是异步的： class App extends React.Component{ constructor(props){ super(props); this.btnClick = this.btnCLi
React实现阿里云OSS上传文件的示例
10-14
为了实现React与阿里云OSS的交互，通常需要使用跨域资源共享（CORS）设置，以便前端能够访问OSS服务。具体的设置步骤包括进入阿里云OSS控制台，进行基本设置，添加跨域规则，指定允许访问的域名和端口。 在安全方面...
react更新状态的两种方式
weixin_46764048的博客
03-07 895
react更新状态的方式
05-React 状态更新
jiegiser博客
11-12 1720
在 React 中触发更新的方式主要有以下几种：ReactDOM.render、setState、forUpdate 以及 hooks 中的 useState 等，关于 hooks 的后面会专门写一篇文章分析。
深入理解React setState：异步、批量更新与优化
这是因为React为了提高性能进行了批量更新的优化。 2. **lazyLoad组件懒加载**: - 懒加载是一种优化策略，允许组件在实际需要时才进行加载和渲染，以减少初始加载时间。React提供`React.lazy`和`Suspense`组件来...
ZF_react 类组件状态的使用 实现组件的更新，合成事件，批量更新
lin_fightin的博客
10-03 450
类组件状态的使用 类组件的数据来源有两个地方，父组件传过来的属性以及自己内部的状态。 属性和状态发生变化后组件都会更新。 state的更新可能是异步，出于性能考虑可能会把多个setState合并到一起使用。 连续两个this.setState({})在第二个state不能拿到最新的值。他们会被合并。 可以使用this.setState(pre=>({…pre}))传入函数的形式来返回一个新值，这样下一个setState就能拿到最新的值。 这些setState还是会异步执行。怎样同步执行呢？在react
【译】React18 中会自动批量更新，达到更少的 render 次数
m0_50823463的博客
03-11 698
批量更新是指 React 的多个 state 在一个 re-render 里更新，以获得更好的性能。例如，如果在一个 click 事件中你有两个 state 更新，React 总是会批量更新它们在一个 re-render 里。如果你执行下面的代码，你将会看到每一次你点击，React 仅仅会执行一次 render，即使你设置了 state 两次。// 还不会 re-render setFlag(f =>!f);
React16源码: React中调度之batchedUpdates的源码实现
Wang的专栏
01-14 1280
进入到 requestWork 函数中的相关判断，可以在源码 nodemodules/react-dom/cjs/react-dom-development.js 中。找到 requestWork 进行debugger，重启 react项目，之后在 Chrome 中调试。在 ReactFiberSchduler.js 中的。
ReactDom.unstable_batchedupdates（React处理批量更新）
张鹏~IT~少年人的博客
09-28 1104
React中不稳定的批量更新处理 import React, { useState } from 'react'; import { unstable_batchedupdates } from 'react-dom'; export default function Demo() { const [name, setName] = useState(''); const [age, setAge] = useState(12); useEffect(() => { unstable_.
说一下我理解的 React - batchUpdate 机制
shenjing_Shining的博客
02-02 1324
batchUpdate 机制（批量更新机制）是理解 React 组件更新流程的重点，要搞清楚主要流程。 梳理这篇博客，来帮助我更好地理解和记忆，水平有限，看到的同学如有发现讲的不对的地方，烦请指正。
React及时更新状态
Lachesis_的博客
08-20 1047
问题： 在dispatch请求接口数据 或者 更新state状态的时候，更新不及时，导致后方代码对该数据进行操作时出现错误。 做法： //1 在你想及时更新的代码外层套一个setTimeout，时间设置为0 该方法将内代码放在进程的最后执行，执行完毕后才进行下一步操作。 setTimeout(()=>{ this.setState({ }) this.props.dispatch({ }) },0) //2 状态更新之后，在后方使用新状态的地方重新获取数据（在页面不刷新的状态下，通过重新this
ReactBatch用于执行频繁更新的批量组件计数或间隔刷新
08-11
React Batch 用于执行频繁更新的批量组件（计数或间隔刷新）
react中setState的过程
u012902406的博客
06-12 761
setState是异步的，原因如下: 1、可能会一次性执行多次的setState，因为你无法限制用户如何使用setState 2、没必要没吃setState都重新渲染，考虑性能 3、即便每次重新渲染，用户也不会看到中间效果，所以只需要看到最后的结果 Vue的数据改变也是异步的，object.defineproperty中的set函数当数据改变的时候set中执行updateComponent(这个方法是异步的），set不是异步的 setState过程： 1、每个组件实例，都有rende..
简单手写实现React类组件的state批量更新
小王的技术库
11-07 674
整理了75个JS高频面试题，并给出了答案和解析，基本上可以保证你能应付面试官关于JS的提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值