构建思维导图类应用时，节点数量可能非常庞大。假设一个企业组织架构图有上万个岗位节点，一次性拉取整棵树会让首屏加载变慢，而且大部分折叠分支的数据用户根本不会展开。合理的做法是把每个节点当成一个可按需加载的容器：节点自身只携带基本信息，子节点在第一次展开时才请求。TypeScript 的类型系统可以帮助我们把这种懒加载行为描述清楚，避免运行时才发现 children 未定义或者加载状态错乱。

一、节点数据模型：把加载状态显式建模

很多开发者会直接使用 children?: MindNode[] 来表示子节点，但这无法区分三种情况：子节点尚未加载、正在加载中、加载完成但为空。对于思维导图而言，这三种状态对应的界面表现完全不同。未加载时通常显示一个可展开的箭头，加载中显示占位动画，加载完成且为空则不再显示展开箭头。

因此建议把每个节点的加载状态直接放在节点对象里。定义一个泛型接口 MindNode<T>，其中 T 是节点携带的自定义业务数据。接口包含 id、label、data 等元数据，再用 children 存储已加载的子节点，同时增加 isExpanded、isLoading、isLoaded 和 error 字段。

interface MindNode<T> {
  id: string;
  label: string;
  data: T;
  children: MindNode<T>[];
  isExpanded: boolean;
  isLoading: boolean;
  isLoaded: boolean;
  error?: string;
}

这个设计把懒加载需要的状态和原始节点绑定在一起。组件层看到 isLoaded 为 false 且 isLoading 为 true 时渲染加载占位；看到 error 有值时渲染错误提示和重试按钮。统一的字段命名让递归渲染逻辑可以完全按照同一套规则处理任何层级，不需要额外判断节点是否具备子节点加载能力。

二、异步加载函数与缓存：避免重复请求

接口只能描述数据结构，真正执行加载动作还需要一个异步函数。推荐为每个节点维护一个 loader，它的类型可以写成 (node: MindNode<T>) => Promise<MindNode<T>[]>。这样加载逻辑与节点数据解耦，业务方可以对接 REST 接口、GraphQL 查询，甚至本地数据源。

type ChildLoader<T> = (node: MindNode<T>) => Promise<MindNode<T>[]>;
async function loadChildren<T>(
  node: MindNode<T>,
  loader: ChildLoader<T>
): Promise<MindNode<T>> {
  if (node.isLoaded || node.isLoading) {
    return node;
  }
  const loadingNode: MindNode<T> = {
    ...node,
    isLoading: true,
    error: undefined
  };
  try {
    const children = await loader(loadingNode);
    return {
      ...loadingNode,
      children,
      isLoaded: true,
      isLoading: false,
      isExpanded: true
    };
  } catch (err) {
    return {
      ...loadingNode,
      isLoading: false,
      error: err instanceof Error ? err.message : '加载失败'
    };
  }
}

上面这段代码把缓存判断放在了最前面：如果节点已经加载过或者正在加载，直接返回原节点，防止用户反复点击展开按钮产生多次请求。请求成功后返回一个新对象，同时把 isExpanded 设为 true，这样状态更新是不可变的，组件可以通过引用变化来判断是否需要重新渲染。如果不需要不可变更新，也可以在原地修改节点对象，但需要注意 React 等框架的状态检测机制。

当节点加载失败时，保留原来的子节点数据，只更新 error 字段，避免因为一次失败就清空已经加载的内容。用户点击重试按钮时，可以先把 isLoaded 重置为 false，再调用同一个加载函数。

三、递归渲染与层级展开的组件约束

有了统一的数据模型，渲染组件可以写成递归形式。每次遇到一个节点，先渲染节点的标题和展开按钮，再根据 isExpanded 决定是否渲染子节点列表。如果 children 尚未加载且用户点击了展开，组件调用加载函数，而不是直接访问 children 数组。

以 React 为例，可以定义一个 MindNodeView 组件，它接收节点和加载函数。核心判断顺序如下：如果节点处于加载中状态，显示占位符；如果出错，显示错误提示；如果已加载且子节点为空，显示空状态；否则递归渲染子节点。这样可以保证任何层级都遵守同一套加载与渲染规则。

function MindNodeView<T>({
  node,
  loader
}: {
  node: MindNode<T>;
  loader: ChildLoader<T>;
}) {
  const handleToggle = async () => {
    if (!node.isLoaded && !node.isLoading) {
      await loadChildren(node, loader);
    } else {
      node.isExpanded = !node.isExpanded;
    }
  };
  return (
    <div>
      <button onClick={handleToggle}>
        {node.isExpanded ? '折叠' : '展开'}
      </button>
      <span>{node.label}</span>
      {node.isLoading && <span>加载中...</span>}
      {node.error && <span>{node.error}</span>}
      {node.isExpanded && node.children.length > 0 && (
        <ul>
          {node.children.map((child) => (
            <li key={child.id}>
              <MindNodeView node={child} loader={loader} />
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}

递归组件虽然直观，但层级很深时要注意调用栈和渲染开销。可以在组件内部维护一个 depth 参数，超过一定层级后默认折叠，或者只渲染前几层。懒加载数据模型不用改变，只需要在渲染逻辑中增加层级判断。另外，如果节点在折叠时仍保留已加载的 children，再次展开就不需要重新请求，缓存自然生效。

四、增量更新与不可变操作实践

思维导图节点数据通常不是一次写入后就不再变化。用户可能重命名节点、拖拽调整顺序、添加或删除子节点。这些操作如果直接修改嵌套的 children 数组，很容易破坏状态一致性，尤其在 React 或 Vue 这类依赖引用比较的框架中。推荐采用不可变更新方式，每次返回一个新的节点树片段。

function updateChildNodes<T>(
  root: MindNode<T>,
  targetId: string,
  updater: (children: MindNode<T>[]) => MindNode<T>[]
): MindNode<T> {
  if (root.id === targetId) {
    return {
      ...root,
      children: updater(root.children),
      isLoaded: true
    };
  }
  return {
    ...root,
    children: root.children.map(
      (child) => updateChildNodes(child, targetId, updater)
    )
  };
}

这个函数递归查找目标节点，只对目标节点的 children 应用 updater，其他节点通过展开运算复制引用。这样顶层根节点引用发生变化，但未受影响的子树引用保持不变，可以配合 React.memo 或 Vue 的 computed 优化渲染。

如果需求更复杂，还可以把每个节点的子节点缓存单独放到一个 Map 中，节点对象只保存 childIds 和加载状态。这种规范化存储适合大规模思维导图，但不适合初学者直接使用，因为会增加同步成本。对于大多数场景，嵌套结构加上不可变更新已经足够清晰。

整体来看，TypeScript 在思维导图懒加载场景中的价值不是增加复杂度，而是把原本隐式的状态约定变成编译期可见的类型契约。节点数据模型中区分未加载、加载中、已加载和错误状态，异步加载函数通过缓存避免重复请求，递归组件按统一规则消费数据，不可变更新保证交互稳定。这样设计出的类型可以平滑扩展，即使后续引入协同编辑或服务端推送，也能基于现有接口继续演进。