javascript / expert
Snippet
Rekursives Tree-Rendering mit memoisierter Context-Auflösung
Rekursive Komponenten sind essenziell für hierarchische Daten. Die Verwendung von React.memo stellt sicher, dass nur der geänderte Zweig neu gerendert wird, was teure Updates des gesamten Baums in tiefen Strukturen verhindert.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
interface TreeNodeProps { node: { id: string; label: string; children?: any[] } }const TreeNode = React.memo(({ node }: TreeNodeProps) => {const [isOpen, setIsOpen] = useState(false);return (<div className="tree-node"><div onClick={() => setIsOpen(!isOpen)}>{node.label}</div>{isOpen && node.children && (<div className="children">{node.children.map((child) => (<TreeNode key={child.id} node={child} />))}</div>)}</div>);});
react
Erklärung
1
const TreeNode = React.memo(...)
Verhindert das erneute Rendern von Geschwisterzweigen, wenn sich der interne Status eines bestimmten Knotens ändert.
2
<TreeNode key={child.id} node={child} />
Die Komponente ruft sich selbst auf, um verschachtelte Ebenen der Datenstruktur dynamisch zu rendern.