react如何收起树
收起树结构的实现方法
在React中实现树的收起/展开功能，通常需要管理树节点的状态并动态渲染。以下是几种常见方法：
使用状态管理展开/收起状态
const TreeNode = ({ node }) => {
const [isExpanded, setIsExpanded] = useState(false);
return (
<div>
<div onClick={() => setIsExpanded(!isExpanded)}>
{node.name}
{node.children && <span>{isExpanded ? '[-]' : '[+]'}</span>}
</div>
{isExpanded && node.children && (
<div style={{ marginLeft: '20px' }}>
{node.children.map(child => (
<TreeNode key={child.id} node={child} />
))}
</div>
)}
</div>
);
};使用递归组件处理嵌套数据
const Tree = ({ data }) => {
const [collapsedNodes, setCollapsedNodes] = useState(new Set());
const toggleNode = (nodeId) => {
const newCollapsed = new Set(collapsedNodes);
collapsedNodes.has(nodeId)
? newCollapsed.delete(nodeId)
: newCollapsed.add(nodeId);
setCollapsedNodes(newCollapsed);
};
const renderTree = (nodes, level = 0) => {
return nodes.map(node => (
<div key={node.id} style={{ marginLeft: `${level * 20}px` }}>
<div onClick={() => toggleNode(node.id)}>
{node.children && (
<span>{collapsedNodes.has(node.id) ? '+' : '-'}</span>
)}
{node.name}
</div>
{node.children && !collapsedNodes.has(node.id) &&
renderTree(node.children, level + 1)}
</div>
));
};
return <div>{renderTree(data)}</div>;
};使用第三方库 对于复杂树形结构，可以考虑使用专门库如：
- react-treebeard
- react-arborist
- rc-tree
这些库提供了现成的收起/展开功能、动画效果和更多自定义选项。
性能优化技巧 对于大型树结构，考虑以下优化：
- 使用虚拟滚动(react-window/react-virtualized)
- 记忆化子组件(React.memo)
- 延迟加载子节点
- 使用不可变数据管理状态
实现时需根据具体需求选择方法，简单场景可使用纯状态管理，复杂场景推荐使用专门库。
