ReactJS - flushSync() 方法

更新于 2025/3/23 12:52:17

FlushSync 是一个 React 函数，它允许我们强制同步更新文档对象模型 (DOM)。换句话说，它允许我们确保对 React 组件的更改快速反映在网页上。此功能有助于以同步方式更新组件状态和 DOM。

简单来说，当我们使用 flushSync() 时，React 会确保对组件状态的任何更改都会立即反映在 DOM 中。这在某些情况下很有用，我们希望确保组件的状态和 DOM 同步而没有任何延迟。

语法

flushSync(callback)

小例子

import { flushSync } from 'react-dom';

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

参数

callback − 它是一个函数。React 将快速调用此回调并同步刷新其拥有的任何更新。它还可以刷新任何剩余的更新、效果或效果内的更新。如果由于此 flushSync 调用而导致更新失败，则可以再次返回回退。

返回值

flushSync 返回未定义。

示例

示例 − 计数器应用

在此示例中，我们将有一个简单的计数器应用，当单击按钮时，它会递增计数值。在更新计数器状态后使用 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>
   );
}