在 useEffect 中使用 flushSync() 是否和使用 useLayoutEffect 一樣？

Question

https://reactjs.org/docs/react-dom.html#flushsync

強制 React同步刷新提供的回調中的任何更新。 這確保了 DOM 立即更新。

// Force this state update to be synchronous.
flushSync(() => {
  setCount(count + 1);
});
// By this point, DOM is updated.

知道了，這和使用useLayoutEffect是一樣的，還是我理解錯了 flushSync() ？

const App = () => {
    const [name, setName] = React.useState("Leonardo");
    React.useEffect(() => {
        ReactDOM.flushSync(() => {
            for (let index = 1; index <= 100000; index++) { // for simulate blocking
                console.log(index);
            }
            setName("Jose");
        });
    });
    return (
        <div>
            <h1>Hello {name}</h1>
        </div>
    );
};

跟這個一樣嗎？

React.useLayoutEffect(() => {
  for (let index = 1; index <= 100000; index++) {
   console.log(index);
  }
  setName("Jose");
});

Answer 1

useLayoutEffect 對於在繪制 dom 之前或代碼導致閃爍時需要發生的事情很有用。 它已經是同步的，並且總是在代碼中的每個 useEffect 掛鈎之前執行。

flushSync 用於將 setState 轉換為同步。 在 99% 的情況下，您將在表單提交處理程序之類的處理程序中使用 flushSync，在 useEffect 之外執行命令式操作

function handleSubmit(values) {
  flushSync(() => {
   setForm(values);
  });
}

請注意 flushSync 會強制重新渲染，因此請謹慎使用

flushSync 的常見用例是在設置 state 后立即更新 DOM。 示例滾動到列表中新添加的元素

 flushSync(() => {
   setElements((elements) => [
    ...elements,
    {
      id: 'random',
    },
   ]);
 });
 // scroll to element here

檢查此示例https://codesandbox.io/s/react-18-batching-updates-flushsync-forked-vlrbq8 。 您可以刪除 flushSync 並查看差異

Answer 2

flushSync用於強制 React 刷新 state 更新，當您嘗試將它放在useEffect中時，它不會影響調用useEffect的時間，它總是在更改反映在瀏覽器上之后，而useLayoutEffect在之前和之前調用這是它們之間的主要區別。

所以flushSync不是應該在 useEffect 中執行的useEffect你甚至會收到這個警告

警告：從生命周期方法內部調用了 flushSync。 當 React 已經呈現時，React 無法刷新。 考慮將此調用移至調度程序任務或微任務。

Answer 3

他們不一樣。 您的代碼可能提供相同的性能、功能和結果，但它們在本質上是不同的。 flushSync是一個低級別的 API，它繞過正常的調度機制立即將更新刷新到 React DOM。 它應該謹慎使用並且只在必要時使用，因為它會導致性能不佳並且更容易出現錯誤和不一致。 另一方面， useLayoutEffect是一個更高級別的掛鈎，它安排 DOM 更新在處理完所有其他更新后同步發生。 它通常是確保更新與頁面布局同步的首選方法。

Answer 4

我做了這段代碼，看看我是否理解了一切，請糾正我：

function App2() {
    const [c, setC] = React.useState(0);
    const inc1 = () => {

      /*setC is asynchronous (withoutFlushSync), so it continues the 
      code downwards and therefore from the DOM it 
      brings us the value without increment in 1*/
      setC((c) => c + 1);

      console.log(document.getElementById("myId").innerText); // old value from DOM
      console.log(c); // However below log will still point to old value ***BECAUSE OF CLOSURE***
    };

    const inc2 = () => {
      /*waits until the DOM is modified with the new state (in the first click
      c = 1)*/
      ReactDOM.flushSync(() => { // Wait
        setC((c) => c + 1);
      });

      /* brings the c = 1 of the DOM because it waited until the DOM 
      was modified with the new state incremented by one. */
      console.log(document.getElementById("myId").innerText); // new value from DOM 

      console.log(c); // However below log will still point to old value ***BECAUSE OF CLOSURE***
    };
    return (
      <div className="App">
        Count: <div id="myId">{c}</div>
        <button onClick={inc1}>without flushSync</button>
        <button onClick={inc2}>with flushSync</button>
      </div>
    );
  }