ReactJS - flushSync() 方法

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

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

语法

flushSync(callback)

小例子

import { flushSync } from 'react-dom';

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

参数

• callback - 它是一个函数。React 将快速调用此回调并同步刷新它的任何更新。它还可以刷新任何剩余的更新、效果或效果内的更新。如果由于此 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 可以运行任何未完成的效果，并同步应用它们包含的任何更新。
• 如有必要，flushSync 可以刷新回调外部的更新，以便刷新回调内部的更新。例如，如果点击后有等待的更新，React 可以在刷新回调内的更新之前刷新这些更新。

总结

FlushSync 是一种 React 方法，它允许我们将同步更新应用于 DOM。虽然它在某些情况下可能很有用，但由于可能会产生性能影响，因此通常建议仅将其用作最后一个选项。