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

打印页面