说到树形结构数据，咱就是说处理起来还是挺麻烦的，尤其是增删改查操作，你得递归遍历吧，那样性Neng就比较低。

Zui近在项目中遇到一个需求，需要对一个复杂的树形结构进行操作，传统的递归方法太慢了哈哈，所以我决定试试WeakMap。

WeakMap是一种特殊的Map，它的键是弱引用的，不会影响垃圾回收。

这意味着，Ru果一个对象只被WeakMap引用，那么它还是Ke以被垃圾回收的，不会造成内存泄漏。

为啥百度不收录我的文章呢？有人说是内容不够原创，其实吧，我觉得可Neng是因为标题党太多，大家dou用同样的标题，搜索引擎分不清谁是谁了。

言归正传，WeakMap的这种特性非常适合用来Zuo缓存或者映射，尤其是处理像树形结构这样的数据时。

传统的递归遍历方法，在处理大型树形结构时效率hen低，因为你需要一层一层地遍历。

时间复杂度: O，这还是比较理想的情况，Ru果树结构hen深，或者有hen多分支，那就geng慢了。

WeakMapKe以让我们以O的时间复杂度来访问某个节点的父节点，这可比递归遍历快多了！

原理: 我们通过WeakMap建立了一个节点到其父节点的映射，这样就Ke以直接获取某个节点的父节点，而不需要遍历整个树。

useTree是一个基于WeakMap实现的Hook，它Ke以帮助我们快速地对树形结构数据进行增删改查操作。

功Neng: 初始化树结构索引、添加子节点、删除指定子节点、获取节点的父节点等。

const _treeWeakMap = new WeakMap;
// 初始化树结构索引
function initTree {
  list.forEach => {
    _treeWeakMap.set;
    if  {
      initTree;
    }
  });
}

_setParent 函数的作用是建立节点与其父级的映射关系。

function _setParent {
  _treeWeakMap.set;
}

: 通过 _setParent , 我们将节点对象引用作为 Key , 其父级引用作为 Value 存入索引库。这样就Neng实现快速查找某个节点的父级，而不需要递归遍历整个树。时间复杂度直接从 O 降到 O，极大提升了性Neng！

有人可Neng会问，为什么不用普通的 Map 而是 WeakMap ？这是因为 WeakMap 的键是弱引用，不会影响垃圾回收。Ru果某个节点被删除且没有其他引用时GC 会自动清理对应的索引项，不会造成内存泄漏 —— 这才是「弱引用解递归，树变轻巧」的精髓所在！

graph LR
subgraph Keys 
K11")
K1")
K2")
end
subgraph Values 
V_Obj1
V_Arr"]
end
K11 -- "指向直接父级" --> V_Obj1
K1 -- "指向所属根数组" --> V_Arr
K2 -- "指向所属根数组" --> V_Arr
style K11 fill:#f9f,stroke:#333
style K1 fill:#bbf,stroke:#333
style K2 fill:#bbf,stroke:#333
style V_Arr fill:#dfd,stroke:#333
style V_Obj1 fill:#fff,stroke:#333

为了让大家geng直观地kan到 WeakMap 里到底存了什么我们来kan下面这个例子：

const list = },
{ id:, name:'社区', children:}
];
initTree; // 初始化索引
// 此时 WeakMap 中的映射关系为：
// Key -> Value 
// { id:, name:'掘金'} -> list 数组 
// { id:, name:'前端组'} -> { id:, name:'掘金'}
// { id:, name:'社区'} -> list 数组 
// 通过 getParent 方法，Ke以直接获取某个节点的父级：
const parent = getParent;
console.log; // 输出：{ id:, name:'掘金'}

原理 ：利用 WeakMap.get 直接获取。时间复杂度为 O 。通过这种方式，我们Ke以在不改变原始数据结构的前提下实现高效的增删改查操作。

注意 ：这里不Neng把新添加的 child 对象当Zuo WeakMap 的 Key ，因为它只是一个外部传入的临时变量。只有当它被添加到树中后我们才Neng获取到正确的对象引用。

React + AntD 版本演示地址 : java6688.github.io/Tree_By_Wea…

Vue + Element+ 版本演示地址：java6688.github.io/Tree_By_Wea…

GitHub 源码地址：

Ru果你也在为复杂树结构的管理发愁，不妨尝试下这种“影子索引”的思路 —— 相信我，它会让你事半功倍！ 代码不多，却Neng快速~快读~~快~~快~~快~~!!!~~~!!!!~!!!~~~!!!!!~!. 实现对树形数据的增删改查操作。 说实话，这种方法还是挺巧妙的，利用弱引用特性+差异化存储策略+O溯源Neng力=完美解决大型动态树的操纵难题! 通过Weakmap在内存中构建了一套 Node->parent映射.原始数据保持纯净,没有任何多余属性! 害，Ru果你有geng好的方法，欢迎在评论区交流讨论哈~