react实现树

React 实现树的常见方法

使用递归组件

递归组件是渲染树形结构的常见方法。通过组件调用自身实现无限层级的渲染。

const TreeNode = ({ node }) => (
  <li>
    {node.name}
    {node.children && (
      <ul>
        {node.children.map(child => (
          <TreeNode key={child.id} node={child} />
        ))}
      </ul>
    )}
  </li>
);

使用第三方库

React生态系统中有多个成熟的树形组件库可供选择：

• react-treebeard：轻量级可定制的树组件
• react-sortable-tree：支持拖拽排序的树
• rc-tree：Ant Design使用的树组件基础库

状态管理

树形结构通常需要维护展开/折叠状态，可通过以下方式实现：

const [expandedNodes, setExpandedNodes] = useState(new Set());

const toggleNode = nodeId => {
  const newExpanded = new Set(expandedNodes);
  expandedNodes.has(nodeId) 
    ? newExpanded.delete(nodeId) 
    : newExpanded.add(nodeId);
  setExpandedNodes(newExpanded);
};

性能优化

大型树结构需要性能优化技术：

• 虚拟滚动（react-window或react-virtualized）
• 惰性加载子节点
• 使用React.memo避免不必要的重渲染

const MemoizedTreeNode = React.memo(TreeNode);

数据格式

典型树结构数据格式示例：

{
  "id": 1,
  "name": "Root",
  "children": [
    {
      "id": 2,
      "name": "Child 1",
      "children": []
    }
  ]
}

交互功能

完整树组件通常需要实现：

• 节点选择/多选
• 拖拽排序
• 节点编辑/删除
• 搜索过滤功能
• 异步加载子节点

实现这些功能需要结合React的状态管理和事件处理机制。