React，React Hooks，Diffrent控制台.在useEffect中记录打印顺序

Question

我收到了两份不同的console.log打印订单，这取决于我是否使用promise。

状态：

let [data,setData] = useState(1);

使用promise时：

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 1
BEFOR SET DATA 1
Data in return 2
AFTER SET DATA 1

因此，当setData((被命中时，组件会重新渲染，返回中的console.log会在setData(((之后的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 1
BEFOR SET DATA 1
AFTER SET DATA 1
Data in return 2

删除async函数后，useEffect首先完成，同时打印旧的状态值，然后打印返回中的console.log。

你知道这里发生了什么吗？为什么这是打印的顺序

Answer 1

这是React的一个实现。

请看一下这个答案。

TL；DR–如果状态更改是异步触发的(例如，包装在promise中(，则不会对其进行批处理；如果它们是直接触发的，它们将被批处理。

如果你看看Dan Abramov的评论，它说

在当前版本中，如果您在React事件处理程序中，它们将被批处理在一起

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

所以在哪里发生的事情是预期的结果。