关于react18中setState在timeout这样的异步操作中不能同步执行的原因

最新推荐文章于 2023-04-22 18:11:51 发布
最新推荐文章于 2023-04-22 18:11:51 发布
阅读量563 收藏 2
点赞数 3
文章标签： javascript 前端 react.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/VVVVV16/article/details/127522280
版权

在react的官方介绍中

react 引入了自动合并的机制，将多次setState合并成一次

这种情况在timeout，promise 都会有体现    主要针对的是click的点击事件中的

主要也是为了 性能和bug的处理 来考虑 这样做

如果真的  真的  想用 之前那种  取消合并

引入这个 flushSync  从react-dom中

这样就可以不会被合并掉了   在setTimeout中还是以同步的形式进行

湖边看客
关注
  • 3
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
「原理篇」你真的了解 React18 的并发吗？
Web_boom的博客
05-11 1953
前言 前阵子，打磨已久的React18终于正式发布，其中最重要的一个更新就是并发（concurrency）。其他的新特性如Suspense、useTransition、useDeferredValue 的内部原理都是基于并发的，可想而知在这次更新中并发的重要性。 但是，并发究竟是什么？React团队引入并发又是为了解决哪些问题呢？它到底是如何去解决的呢？前面提到的React18新特性与并发之间又有什么关系呢？ 相信大家在看官方文档或者看其他人描述React新特性时，或多或少可能会对以上几个问题产生疑问。因此
useTimeout
宏斌的博客
02-23 594
import React from "react"; const useTimeout = (callback: () => void, delay: null | number): void => { const savedCallback = React.useRef<any>(); React.useEffect(() => { savedCallback.current = callback; }, [callback]); React.u
React 18新特性
qq_43539854的博客
09-22 3327
React 18
React18 更新内容
javaip_的博客
04-22 279
2022年3月29日 react18 正式发布React18 最大的变更就是 出现新的一个概念transition，在 React18 中，引进了两个新的 API ——flushSync；还有三个新的 hooks ——useId；React 17 和 React 18 最大的区别就其更新机制：由同步不可更新变成了异步可中断更新，React17 可以通过一些试验性的 API 开启并发模式，而 React18 则全面开启并发模式。transition。
一篇文章彻底理解setState是同步还是异步！
GMLGDJ的博客
03-08 1563
只要你进入了 react 的调度流程，那就是异步的。只要你没有进入 react 的调度流程，那就是同步的。什么东西不会进入 react 的调度流程？ setTimeout setInterval ，直接在 DOM 上绑定原生事件等。这些都不会走 React 的调度流程，你在这种情况下调用 setState ，那这次 setState 就是同步的。 否则就是异步的。 而 setState 同步执行的情况下， DOM 也会被同步更新，也就意味着如果你多次 setState ，会导致多次更新，这是毫无意义并且浪费
详解React中setState回调函数
08-27
在使用setState函数时，需要注意的是，setState是异步的，因此不能保证数据的同步。例如，如果我们在使用setState函数更新状态后，立即使用`this.state`访问状态，可能不会获取到最新的状态。例如： ```javascript ...
【JavaScript源代码】代码解析React中setState同步和异步问题.docx
12-29
代码解析React中setState同步和异步问题 　React起源于Facebook的内部项目。React的出现是革命性的创新，React的是一个颠覆式的前端框架。在React官方这样介绍的它：一个声明式、高效、灵活的、创建用户界面的...
深入研究React中setState
08-28
React中setState的机制是基于队列机制的，通过updater对象的enqueueSetState和enqueueCallback方法来实现状态的更新和回调函数的执行。这样可以避免重复的View刷新，简化我们的逻辑，并减少代码量。
react-React钩子来处理React组件中的异步操作如获取数据
08-14
`fetchData`函数使用了`await`关键字，这使得我们可以在异步操作中使用同步的代码风格。一旦数据加载完成，`setData`更新状态，触发组件重新渲染，显示加载的数据。 3. **错误处理**：在`useEffect`中，我们使用try...
在React中安全地运行异步突变-React开发
05-27
useMutation运行函数，在React组件内部会产生副作用，对于针对API运行请求特别有用。 用法安装它：$ yarn add use-mutation导入它：从'use-mutation'导入useMutation; 创建一个运行变异异步功能的函数createComment...
React 关于setState同步或异步问题的理解
火星基地
11-09 3900
1. setState同步？异步？ 在 React 的类式组件中，我们可以使用setState方法更新state状态。但有些时候使用setState之后，得不到最新的数据。 其实 React 中setState本身执行的过程和代码是同步的，只是因为 React 框架本身的性能优化机制而导致的。React 中合成事件和生命周期函数的调用顺序在更新之前，导致在合成事件和生命周期函数中无法立刻得到更新后的值，形成了异步的形式。 假如在一个合成事件中，循环调用了setState方法n次，如果 React 没有优化，
react中setState同步异步问题
weixin_72127453的博客
02-14 237
setState同步异步问题？
react setState(updater, [callback]) 改变state对象的值(setTimeout定时器)
热门推荐
黄彪博客
07-15 1万+
文章参考 react 修改state为对象中的某一个属性值 var NoLink = React.createClass({ getInitialState:function(){ return {message:''} }, handelChange:function(event){ console.log(event.target);...
React class里setTimeOut里setState不会批量更新
大国复兴的博客
02-23 1289
先看下这段代码： import React from 'react' export default class HK extends React.Component{ constructor(props){ super(props) this.state = { val: 0 } } componentDidMount(){ this.setState({val:this.state.val
react 18新特性
qq_37440870的博客
08-11 1060
react 18最新特性
setState 同步异步 半自动批处理 React18全自动批处理
shuxiaoxii的博客
06-21 1017
什么是批处理(batchedUpdates)：React会尝试将同一上下文中触发的更新合并为一个更新 批处理的好处 合并不必要的更新，减少更新流程调用次数 状态按顺序保存下来，更新时不会出现「竞争问题」 最终触发的更新是异步流程，减少浏览器掉帧可能性 批处理的几种类型 v18的「批处理」是自动的 v18之前的 React 使用半自动的「批处理」. React同时提供了一个API 手动 「批处理」unstable_batchedupdates . 半自动批处理 在v18之前，只有事件回调、生命周.
react中settimeout_深入理解React
weixin_29797343的博客
12-31 1975
对于常用的库和框架，如果仅限于会用，我觉得还是远远不够，至少要理解它的思想，这样才知道怎么可以发挥最大威力，这篇文章是看了react-lite源码后写的。createElement和component在react里面，经过babel的解析后，jsx会变成createElement执行后的结果。const Test = (props) => <h1>hello, {props.na...
React - React v18 的 批处理
kelly0721的博客
09-13 801
React v18 的 批处理
React18 新特性前瞻
weixin_47431743的博客
04-16 1394
Automatic batching 自动批处理 Suspense & SuspenseList useDeferredValue startTransition & useTransition startTransition 与 useDeferredValue 的区别
React18后setstate是同步还是异步
最新发布
05-09
在 React 18 中，`setState` 的行为仍然是异步的。但是，React 团队新引入了一种称为“批处理模式”的机制，该机制可以使得在某些情况下 `setState` 的更新变得更加同步。具体来说，当 React 检测到某个更新是由用户...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值