React, React Hooks, Diffrent console.log

Question

我收到了两个不同的 console.log 打印订单，这些订单基于我是否使用了承诺。状态：let [data,setData] = useState(1);使用承诺时：let asyncFunk = async () => {      return "Asd";    };    useEffect(() => {        asyncFunk().then((result) => {            console.log("BEFOR SET DATA " +data);            setData(prev => prev +1 );            console.log("AFTER SET DATA " +data);        });    },[]);    return (       <div>            {console.log("Data in return " + data)}        </div>    );}console.log 打印顺序是：Data in return 1BEFOR SET DATA 1Data in return 2AFTER SET DATA 1因此，当 setData() 被命中时，组件将重新渲染，并且在 setData() 之后的 console.log 之前调用返回的 console.log。当我删除异步功能时： useEffect(() => {            console.log("BEFOR SET DATA " +data);            setData(prev => prev +1 );            console.log("AFTER SET DATA " +data);    },[]);    return (        <div>            {console.log("Data in return " + data)}        </div>    );}console.log 打印顺序是：Data in return 1BEFOR SET DATA 1AFTER SET DATA 1Data in return 2当 async 函数被移除时，useEffect 首先完成，同时也打印旧的状态值，然后打印返回的 console.log。知道这里发生了什么以及为什么这是打印发生的顺序吗？

Answer 1

这是 React 的一个实现。

请看一下它所说的这个答案。

TL;DR – 如果状态更改是异步触发的（例如包装在承诺中），它们将不会被批处理；如果它们是直接触发的，它们将被批处理。

如果你看看丹·阿布拉莫夫的评论，它说

在当前版本中，如果您在 React 事件处理程序中，它们将被批处理。
...
在当前版本中，事件处理程序之外的几个 setStates（例如在网络响应中）将不会被批处理。所以在这种情况下你会得到两次重新渲染。
...

那么正在发生的事情是预期的结果。