javascript / expert
Snippet
Erzwingen synchroner Updates mit flushSync
React bündelt Zustandsaktualisierungen normalerweise aus Performancegründen. flushSync zwingt React dazu, alle ausstehenden Arbeiten sofort auszuführen und den DOM zu aktualisieren, was für die Integration mit imperativen APIs von Drittanbietern nützlich ist.
snippet.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import { flushSync } from 'react-dom';function HeavyComponent() {const [count, setCount] = React.useState(0);const handleClick = () => {flushSync(() => {setCount(c => c + 1);});// The DOM is guaranteed to be updated hereconsole.log('DOM has been updated');};return <button onClick={handleClick}>{count}</button>;}
react
Erklärung
1
import { flushSync } from 'react-dom';
Importiert das spezialisierte Dienstprogramm aus react-dom, um das standardmäßige asynchrone Batching zu umgehen.
2
flushSync(() => { setCount(c => c + 1); });
Umschließt das State-Update; React führt ein synchrones Re-Render durch, bevor die nächste Codezeile ausgeführt wird.