;
`

$3

所有节点，包括根节点均从远程加载数据：

`typescript
import Tree, { ExpandIconButton } from '@sinoui/tree';

const loadNodes = (parentId) => {
if (parentId) {
return callLoadChildrenApi(parentId);
}
return callLoadTopNodesApi();
};

;
`

指定根节点，其他节点远程加载：

`typescript
import Tree, { ExpandIconButton } from '@sinoui/tree';

const nodes = [
{ id: 'node1', title: '节点1' },
{ id: 'node2', title: '节点2' },
];

;
`

$3

`typescript
import Tree, { ExpandIconButton } from '@sinoui/tree';

(this.treeModel = treeModel)} />;

// 添加节点
this.treeModel.addNode(parentNodeId, {
id: 'node4',
title: '节点4',
});

// 删除节点
this.treeModel.removeNode(nodeId);

// 修改节点
this.treeModel.updateNode(nodeId, {
title: '节点5',
});
`

$3

Tree 默认支持单选和多选。如下：

单选：

`typescript
import Tree, { ExpandIconButton } from '@sinoui/tree';

nodes={nodes}
onSelect={(nodeId, node) => {
console.log(选中的节点:${nodeId});
}}
/>;
`

多选：

`typescript
import Tree, { ExpandIconButton } from '@sinoui/tree';

nodes={nodes}
multiple
onSelect={(nodeIds, nodes) => {
console.log(选中的节点：${nodeIds});
}}
/>;
`

选择状态受控：

`typescript
import Tree, { ExpandIconButton } from '@sinoui/tree';

this.state = {
selectedNodeIds: ['001', '002']
}

nodes={nodes}
selectedNodeIds={['001', '002']}
onSelect={(nodeIds, nodes) => {
this.setState({
selectedNodeIds: nodeIds,
});
}}
/>;
`

定制选择策略：

`typescript
import Tree, { TreeSelectStrategy, TreeNode } from '@sinoui/tree';

class AdvancedSelectStrategy implements TreeSelectStrategy {
this.selectedNodeId = '001';

isSelect(node: TreeNode) {
return this.selectedNodeId === node.id;
}

toggle(node: TreeNode) {
this.selectedNodeId = this.selectedNodeId === node.id ? null : node.id;
}
}

nodes={nodes}
selectStrategy={AdvancedSelectStrategy}
/>
`

$3

对于大量节点的渲染优化的总体策略是：只渲染看得见的树节点。这个策略的前提是：

* 能够非常高效的计算出每个节点的高度。
* 树的高度是可度量的。—— 这一项是可选的，可以参考react-virtualized/AutoSizer

可以参考的案例：react-virtualized。

`typescript
import Tree from '@sinoui/Tree';

;
``