const Demo = () => {
const [count, setCount] = useState(0);
const [count1, setCount1] = useState(0);
const [count2, setCount2] = useState(0);
console.log('===Demo==');
const add = async () => {
await 10;
setCount(count + 1);
setCount1(count1 + 1);
setCount2(count2 + 1);
return (
button
{count}
{count1}
{count2}
export default Demo;
每次点击button ，log会执行3次，当我们把async方法里面的await去掉，让他变成正常方法，那么点击button就会执行一次。
同样代码在React 版本18.2.0时候点击button，log只会打印一次。
再次修改代码对同一个状态同时执行多次更改
import React, { useState } from 'react';
const Demo = () => {
const [count, setCount] = useState(0);
console.log('===Demo==');
const add = async () => {
await 10;
setCount(count + 1);
setCount(count + 1);
setCount(count + 1);
setCount(count + 1);
setCount(count + 1);
setCount(count + 1);
return (
<div onClick={add}>button</div>
<div>{count}</div>
export default Demo;
React 17.0.2 log会打次2次，也就是对于同一状态同时多次修改，那么React会合并一起更改，log打印两次是因为在开发环境下，会多执行一次。
React18，还是只会打印一次log。
React 17.0.2 在异步方法中，多个状态同时修改会造成页面刷新多次，同一状态同时多次修改页面只会刷新一次
React 18 默认在异步方法中开启了批量更新没有问题。
React 17.0.2解决方案：使用unstable_batchedUpdates
import React, { useState } from 'react';
import { unstable_batchedUpdates } from 'react-dom'; // 批量更新状态时使用
const Demo = () => {
const [count, setCount] = useState(0);
const [count1, setCount1] = useState(0);
const [count2, setCount2] = useState(0);
console.log('===Demo==');
const add = async () => {
await 10;
unstable_batchedUpdates(() => {
setCount(count + 1);
setCount1(count1 + 1);
setCount2(count2 + 1);
return (
<div onClick={add}>button</div>
<div>{count}</div>
<div>{count1}</div>
<div>{count2}</div>
export default Demo;
log只会打印一次
推广一下自己开发的微信小程序，有兴趣的朋友可以玩一玩
setState() 不一定是同步的，为了提升性能，React会批量执行state更新和DOM渲染
setState() 并不会立即改变state，而是创建一个即将处理的state
不要依赖s
深入理解 React JS 中的 setState
从源码的角度再看 React JS 中的 setState
从源码的角度看 React JS 中批量更新 State 的策略（上）
1. batchingStrategy 策略
现在我们开始来看 b...
一些组件也许想要更新状态来响应同一事件。下面这个例子是假设的，但是却说明了一个常见的模式：
当事件被触发时，子组件的 onClick 首先被触发（同时触发了它的 setState ）。然后父组件在它自己的 onClick 中调用 setState 。如果 React 立即重渲染组件以响应 setState 调用，最终我们会重渲染子组件两次：
第一次 Child 组件渲染是浪费的。并且我们也不会让 React 跳过 Child 的第二次渲染因为 Parent 可能会传递不同的数据由于其自身的状态更新。这就是为
