javascript / expert
Snippet
Memoisiertes rekursives Tree-Rendering
In tief verschachtelten UI-Strukturen wie Dateibäumen kann die Standard-Reconciliation teuer sein. Durch die Kombination von Rekursion mit benutzerdefinierter Memoisierung, die spezifische Versions-Flags prüft, verhindern wir unnötige Re-Renderings ganzer Unterzweige.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
const TreeNode = React.memo(({ node }) => {return (<li>{node.label}{node.children && (<ul>{node.children.map(child => (<TreeNode key={child.id} node={child} />))}</ul>)}</li>);}, (prev, next) => prev.node.id === next.node.id && prev.node.version === next.node.version);
react
Erklärung
1
const TreeNode = React.memo(({ node }) => {
Definiert eine rekursive Komponente, die sich selbst für Kindknoten aufruft.
2
(prev, next) => prev.node.id === next.node.id && ...
Benutzerdefinierte Vergleichsfunktion zur Leistungsoptimierung über flache Prop-Checks hinaus.