带你通关全栈树型结构设计：从数据库到前端

点击↑上方↑蓝色“编了个程”关注我~

每周至少一篇原创技术文章

周一早上【8:50】准时推送

偶尔也会分享生活的点滴与感悟

这是本公众号的第 3 篇原创文章

树状结构的业务

今天咱们要讨论的树，它不是现实结构的树，也不是数据结构要讨论的树，而是「从业务视角抽象出来的树形结构」。

树形结构可以用在很多的业务上，比如组织结构中的上下级关系、商品分类管理、文件系统、后台系统中的页面和组件关系等等。

下面请系好安全带，我们将从数据库设计、设计模式、前端组件三个方面来介绍关于树状结构设计的方方面面，助你通关全栈树状结构！

数据库设计

树状结构最简单最常用的方法其实是直接存储在JSON里面。现在有很多主流的NoSQL库，比如MongoDB等，而且也有很多关系型数据库也开始支持JSON存储，比如MySQL。

使用JSON的好处是，「维护整棵树比较方便」，直接整存整取就好了，不用去管中间是怎么修改的，怎么映射到数据库的。但缺点是不太高效，比如想要编辑某个叶子节点，查询和更新都没有纯关系型数据那么方便。所以如果你的业务足够简单，数据量也很小，可以使用JSON。否则，还是推荐使用关系型数据来实现。

那如何在关系型数据应该如何设计，才能高效地存储和操作树形结构呢？我们用下图来作为例子：

区域关系

❝

ps：这里假设有多棵树，根节点是亚洲、美洲等

❞

我们首先想到的是用parent_id, 这个字段用来存储“父节点”，根节点的parent_id为0，这样就可以通过递归查询得到一棵树。

很明显，如果只是一个parent_id，我们如果想获得一棵树，当这棵树的深度比较深时，我们需要查询很多次数据库，效率非常低。那有没有什么办法可以一次性把整棵树都查出来呢？我们尝试加一个root_id，用来表示这棵树的根节点。

id	parent_id	root_id	name
1	0	0	亚洲
2	0	0	美洲
3	1	1	中国
4	1	1	日本
5	1	1</