Question

我的API返回表单的节点列表：

 [
    {id: '2', parentId: '1', name: 'baz' },
    {id: '3', parentId: '1', name: 'bar' },
    {id: '4', parentId: '5', name: 'foo' },
    ...
 ]

并使用此信息显示树状结构。

目前我的实现将给定列表保存为状态，我的reducer首先创建现有状态的克隆，然后不可变地添加/更新/删除节点。

我的反应组件然而期望将子列表作为prop（不是api响应的一部分）传递给它们，所以在我最重要的组件中，我采用状态并将其转换为所需的形式并将其传递下来改为降低组件。转换后的树具有以下形式：

{
    id: 0, name: 'root', 'children': [
        {id: '2', parentId: '1', name: 'baz', children: [{..., children: [...]}, {..., children: [...]}, ... },
    ...]
}

，即树的哈希映射版本，其中每个子项存储在其父项的列表中，并且树的根是最外层的对象，然后传递下来。

现在在每次状态更改时，存储状态都会转换为此形式，但是由于节点数量很大，这种重组会导致每次状态更改都会延迟，所以我计划直接以这种形式存储状态（即state = root）并且只重新构建一次API响应。

我不确定如何以不可变的方式对此进行状态更改。假设我想将一个新的子节点添加到节点层次结构深处的特定节点，以一种可变的方式执行此操作很容易：我只是将子节点推送到父节点的子节点列表但是我该怎么做这不可能吗？

或者另外一种方法是什么？

Answer 1

我建议使用immutablejs和treeutils

React-Redux - 如何以不可变的方式处理这种状态变化

1 个答案: