javascript / expert
Snippet
Performance-Optimierung durch Ref-basierte Event-Delegation
In großen Listen verbraucht das Anhängen eines onClick-Handlers an jedes Element erheblich Speicher. Die Verwendung eines einzelnen Listeners an einer übergeordneten Ref via Event-Delegation ist wesentlich effizienter.
snippet.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function LargeList({ items }) {const listRef = useRef(null);const handleClick = (e) => {const item = e.target.closest('[data-id]');if (item) {console.log('Clicked item ID:', item.dataset.id);}};return (<ul ref={listRef} onClick={handleClick}>{items.map(it => (<li key={it.id} data-id={it.id}>{it.label}</li>))}</ul>);}
react
Erklärung
1
onClick={handleClick}
Ein einzelner Event-Listener, der am Container statt an N Elementen angehängt ist.
2
e.target.closest('[data-id]')
Nutzt DOM-Traversierung, um die relevanten Element-Metadaten trotz tiefer Verschachtelung zu finden.
3
item.dataset.id
Ruft Business-Logik-Daten direkt aus dem DOM-Attribut ab.