Semi-Design 树形控件动态设置默认选中项的实现方案

前言

在 Semi-Design 组件库中，Tree 树形控件是一个常用的交互组件，它能够以层级结构展示数据并支持节点选择。在实际开发中，我们经常会遇到需要动态设置默认选中项的需求，比如从接口获取数据后初始化选中状态。本文将详细介绍如何在 Semi-Design 中实现这一功能。

默认属性与受控属性的区别

Semi-Design 的 Tree 组件提供了两种设置选中项的方式：

1. defaultValue/defaultCheckedKeys：这些以 default 开头的属性只在组件初次渲染时生效，后续的更新不会影响组件的选中状态。这种设计符合 React 的受控组件模式，default 系列属性仅用于初始化。

2. value/checkedKeys：这些属性使组件成为受控组件，开发者可以通过 state 完全控制组件的选中状态，任何更新都会反映在 UI 上。

实现动态设置选中项的正确方式

要实现动态设置选中项，应该使用受控模式而非 defaultValue。以下是具体实现方案：

const [checkedKeys, setCheckedKeys] = useState([]);

// 从接口获取数据后更新选中状态
useEffect(() => {
  async function fetchData() {
    const response = await fetch('/api/checked-items');
    const data = await response.json();
    setCheckedKeys(data.checkedKeys);
  }
  fetchData();
}, []);

// 渲染树形控件
<Tree
  treeDataSimpleJson={treeData}
  checkedKeys={checkedKeys}
  multiple
  filterTreeNode
  showFilteredOnly={true}
  onChange={(keys) => setCheckedKeys(keys)}
  style={{
    width: '100%',
    height: 500,
    border: '1px solid var(--semi-color-border)',
  }}
  emptyContent="暂无数据"
/>

常见问题解决方案

1. 数据加载时机问题：如果树数据和选中项数据是异步获取的，需要确保两者都加载完成后再渲染组件。可以使用条件渲染或加载状态来处理。

2. 性能优化：对于大型树结构，频繁更新选中状态可能导致性能问题。可以考虑使用 useMemo 优化树数据的处理，或使用 shouldUpdate 相关的性能优化手段。

3. 数据一致性：确保传入的选中项 keys 与树数据中的节点 key 匹配，否则可能导致选中状态不生效。

最佳实践建议

1. 始终优先考虑使用受控模式（value/checkedKeys）而非 defaultValue，除非你确定选中状态在组件生命周期内不会改变。

2. 对于复杂的树形结构，考虑将树数据和选中状态管理封装成自定义 Hook，提高代码复用性。

3. 在异步场景下，添加适当的加载状态和错误处理，提升用户体验。

4. 定期检查 Semi-Design 的更新日志，了解 Tree 组件的最新特性和优化。

通过以上方案，开发者可以灵活地实现树形控件选中状态的动态管理，满足各种业务场景需求。