为什么reactjs中的setState是Async而不是Sync？

JavaScript

Tom阳光

2020-03-12

我刚刚发现，在React this.setState()函数中，任何组件中的函数都是异步的，或者在完成其调用的函数后被调用。

现在我搜索并找到了这个博客（setState（）状态更改操作在ReactJS中可能是同步的）

在这里，他发现setState是async（在堆栈为空时调用）或sync（在调用后立即调用），具体取决于触发状态更改的方式。

现在这两件事很难消化

  1. 在博客中，该setState函数在一个函数内部被调用updateState，但是触发该updateState函数的并不是被调用函数知道的东西。
  2. 他们为什么要使setState异步，因为JS是单线程语言，而此setState不是WebAPI或服务器调用，因此只能在JS的线程上完成。他们这样做是为了使Re-Rendering不会停止所有事件侦听器和其他操作，或者存在其他设计问题。

第904篇《为什么reactjs中的setState是Async而不是Sync？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共3个回答
西里GO 2020.03.12

好文章在这里 https://github.com/vasanthk/react-bits/blob/master/patterns/27.passing-function-to-setState.md

// assuming this.state.count === 0
this.setState({count: this.state.count + 1});
this.setState({count: this.state.count + 1});
this.setState({count: this.state.count + 1});
// this.state.count === 1, not 3

Solution
this.setState((prevState, props) => ({
  count: prevState.count + props.increment
}));

或通过回调 this.setState ({.....},callback)

https://medium.com/javascript-scene/setstate-gate-abc10a9b2d82 https://medium.freecodecamp.org/functional-setstate-is-the-future-of-react-374f30401b6b

AL村村 2020.03.12

您可以使用以下自动换行进行同步调用 

this.setState((state =>{
  return{
    something
  }
})

伽罗小卤蛋米亚 2020.03.12

1）setState操作是异步的，并且为提高性能而进行了批处理。的文档中对此进行了说明setState。

setState（）不会立即使this.state突变，而是创建一个挂起的状态转换。调用此方法后访问this.state可能会返回现有值。无法保证对setState的调用的同步操作，并且可能为提高性能而对调用进行批处理。


2）为什么它们会使setState异步，因为JS是单线程语言，setState而不是WebAPI或服务器调用？

这是因为setState更改状态并导致重新渲染。这可能是一项昂贵的操作，并且使其同步可能会使浏览器无响应。

因此，setState调用是异步的也可以是批处理的，以获得更好的UI体验和性能。

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android