Reactjs 中是否有 setState() 的同步替代方案

2023-11-22

根据中的解释docs:

setState() 不会立即改变 this.state ,而是创建一个挂起的状态转换。调用此方法后访问 this.state 可能会返回现有值。

无法保证 setState 调用的同步操作,并且可以对调用进行批处理以提高性能。

所以自从setState()是异步的,无法保证其同步性能。有没有替代方案setState()那是同步的。

例如

//initial value of cnt:0
this.setState({cnt:this.state.cnt+1})
alert(this.state.cnt);    //alert value:0

自从alert值是以前的值所以什么是替代方案alert value:1 using setState().

Stackoverflow 上有几个与此问题类似的问题,但我无法找到正确的答案。


正如您从文档中读到的,没有同步替代方案,所描述的原因是性能提升。

不过,我假设您想在更改状态后执行操作,您可以通过以下方式实现:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
     x: 1
    };
    
    console.log('initial state', this.state);
  }
  
  updateState = () => {
   console.log('changing state');
    this.setState({
      x: 2
    },() => { console.log('new state', this.state); })
  }
  
  render() {
    return (
      <div>
      <button onClick={this.updateState}>Change state</button>
    </div>
    );
   
  }
}

ReactDOM.render(
  <MyComponent />,
  document.getElementById("react")
);
<div id="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Reactjs 中是否有 setState() 的同步替代方案 的相关文章

  • Vue 3 Composition API 提供/注入在单文件组件中不起作用

    我正在使用 Composition API 在 VueJS 3 中创建一个库 我实现了提供 注入 如中所述docs https v3 vuejs org guide composition api provide inject html i
  • .push() 将多个对象放入 JavaScript 数组中返回“未定义”

    当我将项目添加到beats数组然后console log用户时 我得到了数组中正确的项目数 但是当我检查 length 时 我总是得到 1 尝试调用索引总是会给我 未定义 如下所示 Tom beats 1 我想我错过了一些明显的东西 但这让
  • 如何使用有角度的材料创建卡片网格?

    我正在尝试使用 ng repeat 创建每行三张卡片的网格 我有一个普通的 javascript 对象数组附加到范围 下面的代码将为每张卡创建一个新行 div div
  • Number.IsNaN() 比 isNaN() 更糟糕吗

    Soooooo isNaNJavaScript 显然被破坏了 比如 isNaN isNaN isNaN true isNaN false isNaN 0 返回 false 当它们看起来都是 不是数字 在 ECMAScript 6 中 草案包
  • 在 React 应用程序的 shell 脚本中设置环境变量

    我正在尝试在 powershell 和 bash 脚本中设置一些环境变量 并在 ReactJS 应用程序中读取它们 shell脚本很简单 env AUTHDOMAIN some domain com env AUTHCLIENTID bun
  • 导航栏下拉菜单(折叠)在 Bootstrap 5 中不起作用

    我在尝试使用以下命令创建响应式菜单或下拉按钮时遇到问题Bootstrap 5一切似乎都正常 导航图标和下拉图标出现 但它不起作用 当我单击nav图标或dropdown按钮 无dropdown menu apears 我想特别提到的是 我还包
  • 如何通过单击链接来更改 div 的内容?

    这是我的网页的 修改后的 jsfiddle 它还有很多 而且定位是正确的 与此相反 http jsfiddle net ry0tec3p 1 http jsfiddle net ry0tec3p 1 a href class btn1 st
  • JavaScript 中的 Promise 有什么意义?

    一个承诺是一个 可能现在可用 或将来可用 或永远不可用的值 来源 MDN 假设我有一个想要处理图片的应用程序 图片已加载 例如在算法在后台使用它之后 或某种其他类型的延迟 现在我想检查一下图片是否可以在future 通过使用承诺 而不是回调
  • 如何使用角度材料在具有可扩展行的表格中创建嵌套垫表

    我有以下数据 id c9d5ab1a subdomain wing domain aircraft part id c9d5ab1a info mimetype application json info dependent parent
  • 如何使用 Javascript 设置查询字符串

    有没有办法使用 javascript 设置查询字符串的值 我的页面有一个过滤器列表 单击该列表时 它将更改右侧的页内结果窗格 我正在尝试更新 url 的查询字符串值 因此如果用户离开页面 然后单击 后退 按钮 他们将返回到最后一个过滤器选择
  • 如何在另一个自定义 Hook 中使用返回值的自定义 Hook?

    我正在使用 React native 其中有一个名为的自定义 HookuseUser使用以下方法从 AWS Amplify 获取用户信息Auth getUserInfro方法 然后获取返回对象的一部分并用它设置一个状态变量 我还有另一个名为
  • 使用 JavaScript 移动页面上的按钮

    我的按钮可以移动 但奇怪的是 我无法弄清楚偏移是否有问题 我希望我的按钮随着鼠标光标移动 但现在它的移动方式不是我想要的 有时它会消失 另外 创建的新按钮是重叠的 我不知道如何解决这个问题并拥有更好的外观 var coorA var coo
  • 如何从 Chrome React Dev Tools 打开 VS code 中的组件文件?

    是否可以右键单击 React Dev 工具下可见的组件 然后单击 在 IDE 中显示 从而在 VSCode 中打开该文件 这将是有益的 因为我不必去寻找该组件 我经常想在 VS Code 中查看某个组件的源代码 但由于组件的模块化复用 代码
  • 如何计算特定字符在字符串中出现的次数

    我正在尝试创建一个函数来查看数组中的任何字符是否在字符串中 如果是 有多少个 我尝试计算每一种模式 但是太多了 我尝试使用 Python 中的 in 运算符的替代方案 但效果不佳 function calc fit element var
  • 如何使用 JavaScript 或 jQuery 克隆 HTML 元素的样式对象?

    我正在尝试克隆元素的样式对象 这应该允许我在更改后重置所述元素的样式 例如 el style left 50px curr style left 50px Modify the elements style The cloned style
  • Highcharts jQuery 渲染问题 - 所有浏览器

    我在尝试使用构建堆积柱形图时遇到了一个奇怪的问题高图表 http www highcharts com 当图表呈现时 在您调整浏览器大小之前 不会显示列无论如何 导致图表重绘 我认为 图表的其余部分显示 轴 标题等 但不显示列本身 我在 I
  • 滚动顶部不符合预期

    Note 由于上次忘记奖励而重新开放赏金 A Woff 大师已经给出答案 我想在用户展开某一行时到达该行 这样当最后一个可见行展开时 用户不必向下滚动即可查看内容 I used example tbody on click td green
  • 将数组从 jquery ajax 传递到代码后面

    我必须将二维数组传递给在asp net网页代码后面编写的页面方法我有一个变量objList作为二维数组 我使用以下代码来实现此目的 但没有成功 并且未调用页面方法 脚本语言 function BindTable objList ajax u
  • 如何通过索引访问 JSON 对象中的字段

    我知道这不是最好的方法 但我别无选择 我必须通过索引访问 JSONObject 中的项目 访问对象的标准方法是只写this objectName or this objectName 我还找到了一种获取 json 对象内所有字段的方法 fo
  • 测量窗口偏移

    有没有一种方法可以测量 jQuery 中窗口的偏移量 以便我可以比较 固定 元素和相对定位元素的位置 我需要能够知道窗口滚动了多远 以便我可以使用该图来计算固定元素的高度 相对于视口顶部 和相对对象的高度 相对于顶部 之间的差异文件的内容

随机推荐

  • 创建具有预先确定的平均值和标准差的数组

    我正在尝试使用 Numpy 创建一个具有预定平均值和标准差值的数组 该数组需要其中的随机数 到目前为止 我可以生成一个数组并计算平均值和标准差 但无法让数组受值控制 import numpy as np x np random randn
  • 如何将数组设置为mysql用户变量

    我没想到会发现这如此困难 但我试图在 MySQL 中设置一个用户变量来包含一个值数组 我不知道如何做到这一点 所以尝试做一些研究 但很惊讶没有找到答案 我努力了 SET billable types client1 client2 clie
  • 将数据从 csv 转换为动态列表 (Flutter)

    我创建了一个加载 CSV 文件并将其显示为列表视图的应用程序 我使用了以下示例 https gist github com Rahiche 9b4b2d3b5c24dddbbe662b58c5a2dcd2 问题是我的列表不生成行 I flu
  • 如何在另一个 git 存储库中提交 git 存储库

    我正在开发一个使用 git 的应用程序 因此我需要测试它与 git 的集成 在我的 git 存储库中 我需要另一个存储库 my git repo tests another repo 在没有 git 子模块的情况下如何提交它 我不想为一个文
  • 检查 Selenium 中是否存在 Element

    我想检查 Selenium 中是否存在某个元素 如果存在 则为其分配一个名称 现在我有一些看起来像这样的东西 IWebElement size9 driver FindElement By CssSelector a data value
  • 观察者模式与反应器模式

    我一直在研究两者 但找不到任何真正的区别 我错过了什么吗 在网络上 有些人说观察者应该只处理一个事件 而反应器应该处理很多事件 但我不认为这是一个真正的区别 因为反应器可以像许多观察者一样被看到 有什么区别吗 或者新名称 Reactor 只
  • OpenReadStream 允许的最大大小

    OpenReadStream 允许的最大大小是多少 现在 使用 10MB 但我认为必须有一定的上限 可以带GB吗 在 ASP NET Core 5 0 中 上传文件的框架文件大小限制为 2 GB 但是 从 ASP NET Core 6 0
  • C 中的局部结构

    如果一个结构体仅在一个函数中使用 我可以在该函数中声明它吗 我可以这样做吗 int func struct int a b s s a 5 return s a gcc 被它噎住了 但它发出了一个看起来非常奇怪的错误 我无法理解 而不是说
  • 涉及多个表的外键约束

    我在 Postgres 9 3 数据库中有以下场景 表 B 和 C 参考表 A 表 C 有一个引用表 B 的可选字段 我想确保对于表 C 中引用表 B 的每一行 c b a c a 也就是说 如果 C 引用了 B 则两行应指向表 A 中的同
  • Google Calendar V3 REST API 中的批量请求

    如何通过 V3 REST API 使用批量请求获取 添加 更新 Google 日历事件 我已经尝试过 但不起作用 根据文档 https developers google com google apps calendar batch 应该可
  • Chrome 用户脚本是否像 Greasemonkey 脚本一样与全局命名空间分离?

    我知道 Greasemonkey 脚本自动包装在匿名函数中 以某种方式隔离 以防止它们与页面中的脚本发生冲突 Chrome 用户脚本也会发生同样的情况吗 是的 Greasemonkey 脚本是通常封装在匿名函数中 And Chrome 用户
  • C++中NULL和False一样吗

    在 C gcc VS 中 NULL 被视为与 False 相同 或者更重要的是 如果在逻辑语句中 NULL 的计算结果是什么 还有许多其他问题 但没有专门针对 C 的问题 由于某种原因 使用 NULL 控件循环 for 只会冻结程序 表明
  • 在 bash 中指定两个文件扩展名完成

    我正在尝试修改 bash 完整属性 我可以这样排除命令的文件扩展名 complete f X hi vim 我想指定两个文件名进行排除 我该怎么做呢 注意 以下命令不起作用 complete f X hi o vim 一种方法是打开扩展的全
  • 操作系统中的加载程序如何工作? [关闭]

    Closed 这个问题需要多问focused 目前不接受答案 我知道加载程序是一个将程序加载到主内存的程序 那么 这实际上是如何运作的呢 到底发生了什么 实际上 当加载程序加载程序时 会在 PCB 中创建一个条目 并将程序放入作业池中 程序
  • 在 C++ 中调用 this->get/this->set 方法与直接访问成员变量

    假设我有一堂课Foo 带有私有变量bar 包含一些状态Foo 如果有必要 我可以编写公共 get set 方法bar 当然 我会尽可能避免这种情况以保持封装性 假设我有这些获取 设置方法 每当我必须访问或修改bar 在属于的方法内Foo 我
  • 在 Symfony2 中,\DateTime 是什么意思?

    在 Symfony 2 中 这一行的含义是什么 task gt setDueDate new DateTime tomorrow 什么是 DateTime表示 可以从任何地方访问它吗 首先仅供参考 这与 Symfony 没有任何关系 只是碰
  • 如何防止 Play 商店测试影响 Firebase Analytics

    我刚刚启动了一个新应用程序 并且正在使用 Firebase Analytics 然而 每次我将新版本上传到 Play 商店时 Google 都会自动在 11 台设备上对其进行测试 这太棒了 有没有办法防止这些测试影响分析 我从一个小的用户群
  • Linux 和 Windows 之间的 numpy 性能差异

    我正在尝试跑步sklearn decomposition TruncatedSVD 在两台不同的计算机上并了解性能差异 电脑1 Windows 7 物理计算机 OS Name Microsoft Windows 7 Professional
  • 使用glide加载位图到ImageView

    我想在裁剪和调整位图大小后使用 Glide 将位图加载到 ImageView 我不想使用ImageView setImageBitmap bitmap 因为我正在加载大量图像 它可能会占用一些内存 尽管图像尺寸很小 但我只需要使用 Glid
  • Reactjs 中是否有 setState() 的同步替代方案

    根据中的解释docs setState 不会立即改变 this state 而是创建一个挂起的状态转换 调用此方法后访问 this state 可能会返回现有值 无法保证 setState 调用的同步操作 并且可以对调用进行批处理以提高性能