ReactJS - flushSync() 方法

FlushSync 是一個 React 函式，允許我們強制對文件物件模型 (DOM) 進行同步更新。換句話說，它允許我們確保對 React 元件的更改能夠快速反映在網頁上。此函式有助於以同步方式更新元件狀態和 DOM。

簡單來說，當我們使用 flushSync() 時，React 會確保對元件狀態的任何更改都會立即反映在 DOM 中。這在某些情況下非常有用，在這些情況下，我們希望確保元件的狀態和 DOM 保持同步，而沒有任何延遲。

語法

flushSync(callback)

小程式例

import { flushSync } from 'react-dom';

flushSync(() => {
   setHereg(657);
});

引數

callback − 它是一個函式。React 將快速呼叫此回撥並同步重新整理它擁有的任何更新。它還可以重新整理任何剩餘的更新、Effects 或 Effects 內部的更新。如果由於此 flushSync 呼叫導致更新失敗，則可以再次返回回退。

返回值

flushSync 返回 undefined。

示例

示例 - 計數器應用

在此示例中，我們將有一個簡單的計數器應用，當點選按鈕時，它會遞增計數值。flushSync() 函式在更新計數器狀態後使用，以確保 DOM 中立即更新，使顯示的計數器值與元件狀態保持同步，沒有任何延遲。

import React, { useState, flushSync } from 'react';

const CounterApp = () => {
   const [count, setCount] = useState(0);
   const handleIncrement = () => {
      setCount(count + 1);
      flushSync(); // immediate update
   };
   return (
      <div>
         <h1>Counter: {count}</h1>
         <button onClick={handleIncrement}>Increment</button>
      </div>
   );
};

export default CounterApp;

輸出

示例 - 受控輸入應用

此應用將有一個受控輸入欄位，其中顯示的文字會隨著使用者輸入而動態更新。flushSync() 函式在更新輸入值狀態後使用，以確保 DOM 中立即更新。這有助於在輸入欄位和顯示的文字之間保持同步，而沒有任何明顯的延遲。

import React, { useState, flushSync } from 'react';

const InputApp = () => {
   const [inputValue, setInputValue] = useState('');   
   const handleChange = (e) => {
      setInputValue(e.target.value);
      flushSync(); // immediate update
   };   
   return (
      <div>
         <label>Type something:</label>
         <input type="text" value={inputValue} onChange={handleChange} />
         <p>You typed: {inputValue}</p>
      </div>
   );
};

export default InputApp;

輸出

示例 - 即時聊天應用

因此，我們將建立一個使用 flushSync 的簡單應用。在此示例中，我們將使用一個即時聊天應用，當有新訊息到達時，它會更新訊息指示器。以下是此聊天應用的程式碼 -

import React, { useState, useEffect } from 'react';
import { flushSync } from 'react-dom';

export default function ChatApp() {
   const [newMessages, setNewMessages] = useState(0);   
   useEffect(() => {
      function simulateIncomingMessage() {
         flushSync(() => {
            setNewMessages(newMessages + 1);
         });
      }      
      const messageInterval = setInterval(simulateIncomingMessage, 5000);      
      return () => {
         clearInterval(messageInterval);
      };
   }, [newMessages]);
   
   return (
      <div>
         <h1>Real-time Chat App</h1>
         <p>New Messages: {newMessages}</p>
         <button onClick={() => setNewMessages(0)}>Clear Messages</button>
      </div>
   );
}

輸出

在此示例程式碼中，ChatApp 建立以定期間隔到達的新訊息。我們使用了 flushSync 來確保新訊息到達時訊息計數能夠快速更新。要將訊息計數重置為零，請點選“清除訊息”按鈕。

侷限性

flushSync 可能會對效能產生負面影響。謹慎使用。
重新整理掛起的 Suspense 邊界可能會導致它們顯示其回退狀態。
在返回之前，flushSync 可以執行任何未完成的 effect 並同步應用它們包含的任何更新。
如果需要重新整理回撥內的更新，flushSync 可以重新整理回撥之外的更新。例如，如果存在來自點選的等待更新，則 React 可以在重新整理回撥內的更新之前重新整理這些更新。

總結

FlushSync 是一個 React 方法，允許我們對 DOM 應用同步更新。雖然它在某些情況下可能有用，但通常建議僅將其作為最後的選擇，因為可能會影響效能。

reactjs_reference_api.htm

列印頁面