React, React Hooks, Diffrent console.log 在 useEffect 中打印順序

Question

我得到了兩個不同的 console.log 打印訂單，基於我是否使用 promise。

state：

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 之前被調用。

當我刪除異步 function 時：

 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

當異步 function 被刪除時，useEffect 首先完成，並且還打印舊的 state 值，然后打印來自返回的 console.log。

知道這里發生了什么以及為什么這是打印的順序嗎？

Answer 1

這是一個 React 的實現。

請看一下它所說的這個答案。

TL;DR – 如果 state 更改是異步觸發的（例如包裝在一個承諾中），它們將不會被批處理； 如果它們被直接觸發，它們將被批處理。

如果你看一下Dan Abramov 的評論，它會說

在當前版本中，如果您在 React 事件處理程序中，它們將被一起批處理。
...
在當前版本中，事件處理程序之外的幾個 setState（例如在網絡響應中）將不會被批處理。 所以在這種情況下你會得到兩次重新渲染。
...

所以發生的事情是預期的結果。