React 18 中 hooks 的順序是什么？

Question

React 18實現了一個新的鈎子： useInsertionEffect 。

那么對於useEffect和useLayoutEffect ，這 3 個鈎子在組件生成時的順序是什么？

Answer 1

根據React 文檔：

使用插入效果

它在所有 DOM 突變之前同步觸發。 在useLayoutEffect中讀取布局之前，使用它來將 styles 注入 DOM。 所以它在useLayoutEffect之前運行。

使用布局效果

它在所有 DOM 變更后同步觸發。 使用它從 DOM 讀取布局並同步重新渲染。

使用效果

它將在渲染提交到屏幕后運行。 所以它在useLayoutEffect之后運行。

因此運行順序為：

1. 使用插入效果
2. 使用布局效果
3. 使用效果