如何在不订阅所有节点的前提下统计树中带enabled属性的节点数？

核心思路 #

完全不需要为每个节点单独挂载状态订阅做计数累加，通过RxJS流聚合或者树结构内的增量计数逻辑，就能用极低的开销实现统计。

方案1：RxJS流聚合适配静态树场景 #

适合节点结构固定、没有频繁动态增删的树形结构，完全保持现有Node类的结构不做侵入修改：

• 先写通用递归遍历函数，一次性收集整棵树的所有节点实例
• 把每个节点单独暴露的enabledState流，通过RxJS的merge操作符聚合成一个单一的总状态流，只需要在这一个聚合流上挂载订阅做计数逻辑即可
• 注意：因为当前的enabledState是普通Subject，没有初始值，需要给每个节点的流补startWith操作符，把节点当前的初始启用状态带入流中，避免初始计数错误

对应的核心实现代码：

import { merge, startWith, scan, map } from 'rxjs';

// 递归收集整树所有节点
function collectAllNodes(root: Node): Node[] {
  const nodeList: Node[] = [];
  const traverse = (node: Node) => {
    nodeList.push(node);
    node.children?.forEach(traverse);
  }
  traverse(root);
  return nodeList;
}

// 构建已启用节点总数的可观察流
function buildEnabledCountStream(root: Node) {
  const allNodes = collectAllNodes(root);
  // 把每个节点的状态流映射为带节点标识的事件，附带初始值
  const nodeEventStreams = allNodes.map(node => 
    node.enabledState.pipe(
      map(enabled => ({ nodeId: node.id, enabled })),
      startWith({ nodeId: node.id, enabled: node.enabled })
    )
  );

  return merge(...nodeEventStreams).pipe(
    // 用scan维护全树节点的状态字典，每次状态更新就更新对应节点的状态
    scan((stateMap, event) => {
      stateMap.set(event.nodeId, event.enabled);
      return stateMap;
    }, new Map<any, boolean>()),
    // 从状态字典中筛选出启用状态为true的节点，计算总数
    map(stateMap => Array.from(stateMap.values()).filter(Boolean).length)
  )
}

这个方案下，不管树里有几百还是几千个节点，最终只需要1个订阅入口，完全避免了多订阅带来的内存开销和泄漏风险。

方案2：增量计数适配动态树场景 #

适合节点会动态增删、带父子状态联动的树形结构，开销比流聚合方案更低：

• 直接在树结构内部维护一个计数变量，每次节点toggle状态变化时，计算本次状态翻转带来的计数差值（false变true加1，true变false减1），直接累加全局计数
• 节点新增、删除的时候，同步根据节点的初始状态修正全局计数，不需要全量遍历计算

对应的实现逻辑：

class Tree {
  // 每棵树独立维护自己的已启用节点计数，避免多树场景计数串扰
  totalEnabledCount = 0;
  rootNode: Node;
}

class Node implements ITreeNode {
  id?: any;
  name: string;
  children?: Node[];
  // 补全类定义里遗漏的enabled字段
  enabled: boolean = false;
  enabledState = new Subject<boolean>();
  // 持有所属树的引用，方便计数同步
  belongTree: Tree;

  toggle() {
    this.enabled = !this.enabled;
    // 计算状态变化带来的计数差值
    const delta = this.enabled ? 1 : -1;
    this.belongTree.totalEnabledCount += delta;
    this.enabledState.next(this.enabled);
  }

  // 新增子节点时同步修正计数
  addChild(childNode: Node) {
    if (!this.children) this.children = [];
    this.children.push(childNode);
    this.belongTree.totalEnabledCount += Number(childNode.enabled);
  }

  // 删除子节点时同步修正计数
  removeChild(childId: any) {
    const targetIdx = this.children?.findIndex(child => child.id === childId);
    if (targetIdx === undefined || targetIdx < 0) return;
    const removedNode = this.children[targetIdx];
    this.belongTree.totalEnabledCount -= Number(removedNode.enabled);
    this.children?.splice(targetIdx, 1);
  }
}

容易踩的坑 #

• 原Node类定义存在两处语法和逻辑问题：
  1. 可选成员写法错误：children:? Node[]的TS语法不合法，正确写法为children?: Node[]
  2. 遗漏字段声明：toggle方法内部使用了this.enabled属性，但类成员中没有定义这个字段，运行时会出现状态值为undefined的问题，必须补上enabled: boolean = false的成员定义
• 不要在每个节点的enabledState上直接写全局计数的订阅逻辑，这种写法不仅订阅数量和节点数完全绑定，还很容易出现节点销毁时没有退订导致的内存泄漏
• 用merge聚合流的时候，必须给每个流补startWith的初始值，否则初始挂载时会因为拿不到节点的当前启用状态，出现初始计数为0的计算错误

内容的提问来源于stack exchange，提问作者user14517112