javascript / expert
Snippet
Synchrone Statusaktualisierungen mit flushSync
React bündelt normalerweise Statusaktualisierungen aus Performancegründen. flushSync zwingt React dazu, das DOM innerhalb des bereitgestellten Callbacks sofort zu aktualisieren. Dies ist nützlich, wenn Sie sofort nach einer Statusänderung, die sonst asynchron wäre, mit dem DOM interagieren müssen (z. B. Messen oder Scrollen).
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import { flushSync } from 'react-dom';import { useState, useRef } from 'react';export function ScrollList() {const [items, setItems] = useState([]);const listRef = useRef(null);const addItem = () => {flushSync(() => {setItems([...items, `Item ${items.length}`]);});// The DOM is now updated synchronouslylistRef.current.scrollTop = listRef.current.scrollHeight;};return (<div><button onClick={addItem}>Add</button><div ref={listRef} style={{ height: '100px', overflowY: 'scroll' }}>{items.map(item => <div key={item}>{item}</div>)}</div></div>);}
nextjs
Erklärung
1
flushSync(() => { ... })
Zwingt React dazu, einen synchronen Render und Commit an das DOM durchzuführen.
2
listRef.current.scrollHeight
Greift sofort nach dem Flush auf die aktualisierten DOM-Dimensionen zu.