如何保存可折叠对象与数组的展开收起状态且数据修改后仍生效

完全可以在不使用硬编码唯一ID的前提下实现状态持久化，核心思路是放弃基于索引/固定键的面包屑路径，改用内容特征哈希+层级路径组合的方式标记每个可折叠节点。

数据结构设计 #

用一个扁平的Map或者普通对象存储状态，key是节点的唯一标识串，value是布尔值（true=展开，false=折叠），默认缺省状态可以统一设为折叠或者展开，不需要全量存储，仅存用户主动操作过的节点状态即可。

// 状态存储结构示例
type CollapseState = Map<string, boolean>
// 也可使用普通对象实现
// type CollapseState = Record<string, boolean>

节点唯一标识生成规则 #

每个节点的标识串由当前层级的特征值和上层节点的标识串拼接而成，不同类型节点的特征值生成规则如下：

• 对象属性节点：用属性名:属性值前16位哈希作为当前层级的特征值
• 数组元素节点：用元素类型:元素值前16位哈希作为当前层级的特征值；如果是对象/数组类型元素，取其序列化后的前16位哈希，基础类型直接取值的哈希即可
• 每层特征值之间用固定分隔符比如|拼接，最终生成完整的节点标识

举个实际生成示例：

// 原始数据
const data = {
  users: [
    { id: 1, name: "张三", age: 20 },
    { id: 2, name: "李四", age: 22 }
  ]
}
// users数组中第一个用户对象的标识串：root|users:xxhash|object:yyhash
// 该用户对象下name属性的标识串：root|users:xxhash|object:yyhash|name:"张三"

状态读取和更新逻辑 #

• 渲染节点时，按照上述规则实时计算当前节点的标识串，直接去状态存储中查询对应值即可，查询不到则使用默认状态
• 数组插入/删除元素时，其他元素的哈希特征不会变化，所以之前存储的状态标识依然有效，不会因为索引变化导致状态错位
• 当某个节点的内容本身被修改时，它的哈希值会同步变化，对应的状态自动回归默认值，符合业务逻辑预期（内容变更相当于新节点，不需要保留旧的折叠状态）

可选优化方案 #

如果担心哈希计算的性能问题，可以做两个针对性优化：

• 仅在用户点击折叠/展开操作时，才计算节点标识并把状态写入存储，渲染时仅计算需要读取状态的节点的标识即可
• 对于体积较大的对象/数组，可以只取几个关键字段（比如对象的id、name字段，数组元素的前2个字段）计算哈希，不需要全量序列化计算，只要能区分同层级的不同节点即可

轻量替代方案：弱引用映射 #

如果你的运行环境支持WeakMap，还可以直接用节点本身的引用作为key存储状态：

const collapseState = new WeakMap<Record<string, any>|any[], boolean>()

这种方案的优势是完全不需要计算哈希，只要节点的引用没有变化，状态就不会丢失，数组插入新元素也完全不影响其他元素的状态。缺点是如果节点的引用被全量替换（比如整体刷新了整个数据对象），状态就会丢失，适合数据为增量修改、不会全量替换的场景。

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