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 1

BEFOR SET DATA 1

Data in return 2

AFTER 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 1

BEFOR SET DATA 1

AFTER SET DATA 1

Data in return 2

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

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

Answer 1

这是 React 的一个实现。请看一下它所说的这个答案。TL;DR – 如果状态更改是异步触发的（例如包装在承诺中），它们将不会被批处理；如果它们是直接触发的，它们将被批处理。如果你看看丹·阿布拉莫夫的评论，它说在当前版本中，如果您在 React 事件处理程序中，它们将被批处理。...在当前版本中，事件处理程序之外的几个 setStates（例如在网络响应中）将不会被批处理。所以在这种情况下你会得到两次重新渲染。...那么正在发生的事情是预期的结果。