setState

vue对数据管理和界面渲染的流程解析
React对数据管理和界面渲染的流程解析
对Vue和React的对比

使用setState理由：

React并没有实现类似Vue2中的Object.defineProperty 或者Vue3的Proxy的方式监听数据的变化。所以需要通过setState来告诉React数据发生了变化。
setState是从Component中继承过来的。

详细使用

1.基本使用

2.传入一个回调函数: 在回调函数中编写新的state逻辑 当前的回调函数可以将之前的state和props传递进来

3.异步使用 ： setState 方法其实是 “异步” 的。即立马执行之后，是无法直接获取到最新的 state 的，需要经过 React 对 state 的所有改变进行合并处理之后，才会去计算新的虚拟dom，再根据最新的虚拟dom去重新渲染真实dom。

处理方式

React 其实会维护着一个 state 的更新队列，每次调用 setState 都会先把当前修改的 state 推进这个队列，在最后，React 会对这个队列进行合并处理，然后去执行回调。根据最终的合并结果再去走下面的流程（更新虚拟dom，触发渲染）。

异步理解

setState并不是真正意义上的异步操作，它只是模拟了异步的行为。React中会去维护一个标识（isBatchingUpdates），判断是直接更新还是先暂存state进队列。setTimeout以及原生事件都会直接去更新state，因此可以立即得到最新state。而合成事件和React生命周期函数中，是受React控制的，其会将isBatchingUpdates设置为 true，从而走的是类似异步的那一套。 1.显著提升性能(批处理获取多个更新) 2.如果同步更新了state，但是还没有执行render函数，那么state和props不能保持同步 3. setState 在 React合成事件以及组件生命周期里面“异步”，在原生dom事件以及SetTimeout里面是同步的

setState不一定是异步 （React18之前）

setState默认是异步 （React18之后）

在React18之后，默认所有操作在批处理中

不使用批处理： flushSync(()=> {this.setStae()}) 变成同步操作