了解React中setState同步/异步表现

一、了解

在React优化场景环境中，将对组件state的更改加入到队列中，并通知React需要使用更新后的state重新渲染组件及其子组件，用于更新用户界面、响应处理事件等主要方式。

二、特点

无论是this.setState还是hook，在调用state过程中都是一个请求的动作，不断加入React的state队列，并不会马上更新命令，而是会进行延迟调用，出现state更新的异步表现。

三、调用同步/异步的操作方式

1、异步表现

可以通过setState的第二个参数回调方法获取传递结果，或componentDidUpodate。如果需要马上改变状态，可以使用setState((state, props) => {})进行处理。

2、同步表现

在原生环境中（如setTimeout），state的表现为同步，原因是外层环境影响（原生环境没有优化机制，React生命周期环境有state队列优化机制）。

四、实例

1、例1(React 优化环境下state更新异步）

2、例2（React 优化环境的回调函数state同步）

3、例3（原生事件环境下state更新同步）

、
根据以上三个例子，可以看出在需要进行异步的情况下，使用例1实现。若需要同步情况，使用例2、3实现。当前需要结合当前的业务场景进行更加细致的表达情况。

五、总结

React 中的 setState 既不是同步也不是异步，而是在不同场景上表现出异步或者同步的表现，归根到底是使用场景是React优化机制亦或者是原生事件。