SEMI DESIGN 源码学习（八）树形控件

Tree

Tree 组件位于 packages/semi-ui/tree/index.tsx

静态属性 contextType 是框架全局 configProvider 的类型，用来获取应用全局状态。

Tree 使用 foundation: TreeFoundation 属性调用业务方法

它的 adapter 实现了 foundation 所需的方法。

NodeList

树组件的 renderNodeList 是渲染核心方法，在不使用虚拟列表的情况下它返回一个 NodeList 组件

NodeList 使用 renderTreeNode 方法渲染树的子节点

renderTreeNode 是 Tree 组件本身的方法，遍历 mapData 返回 TreeNode 组件渲染树节点

TreeNode 组件通过 level 属性确定节点的层级

VirtualList

当使用虚拟列表的时候 renderNodeList 返回一个 AutoSizer 组件， 里面包裹了一个VirtualList

option 属性同样使用 renderTreeNode 方法渲染子节点

TreeContext

最后 Tree 的 render 方法返回一个 TreeContext.Provider，用来管理整个树组件的状态

TreeContext 包含了树组件全部状态

本文完，感谢阅读。