Question

我在React中有一个应用程序，它在基本级别上是一个显示来自任意数量的第二级“子”资源的数据的文档，并且每个子项显示来自任意数量的第3级“孙子”的数据“资源，每个孙子显示来自任意数量的第4级”曾孙“资源的数据。

这是从我的API服务器检索的基本JSON结构：

{ id: 1,
  children: [
    { id: 1,
      grandchildren: [
        { id: 1,
          greatgrandchildren: [{ id: 1 }, { id: 2 }, ...]
        },
        ...
      ]
    },
    ...
  ]
}

每个级别的对象都有一堆额外的属性，为简单起见，我在这里没有显示。

根据推荐的React方式，在加载时，我的应用程序的顶级组件检索并设置此对象，然后将相关数据作为道具传递给子项以构建out组件树，它反映了这种结构。

这很好，但我需要能够对每个资源执行CRUD（创建/读取/更新/删除）操作，并且由于需要传递整个数据而导致痛苦当我只是想修改它的一小部分时，反对setState() 。它在顶级或第二级并没有那么糟糕，但是由于需要迭代，根据id获取我想要的对象，更改它，然后构建整个副本结构只是改变了一点。 React插件提供了一个update()函数，这很有用，但实际上只对最后一步有帮助 - 我仍然需要处理嵌套迭代并在那之外重建相关数组。

添加了额外的复杂性，因为我的目标是使用临时数据乐观地更新视图，然后使用从服务器返回的正确数据（成功时）或恢复（失败时）再次更新它。这意味着我需要小心保留旧数据/状态的副本而不要改变它（即共享引用）。

最后，我目前为我的顶级组件上定义的每个级别的每个CRUD操作都有一个回调方法（共12个方法）。这似乎过分，但他们都需要能够调用this.setState()，我发现很难弄清楚如何重构它们之间的共性。我已经有一个单独的API对象来执行实际的Ajax调用。

所以我的问题是：是否有更好的React适合的方法来处理CRUD操作并使用像我一样的嵌套数据结构为它们操作数据，以允许乐观更新？

Answer 1

从表面上看，flux architecture可能就是您正在寻找的答案。在这种情况下，对于每种类型的资源，您将拥有Store（或者对于所有资源，可能只有一个Store，具体取决于数据的结构），并让视图监听数据中的更改他们关心。

Answer 2

经过一些研究后，我逐渐明白，状态变化问题是不可变性库（如immutable.js和mori）似乎成为热门话题的原因之一在React社区中，因为它们有助于修改深层嵌套结构的小部分，同时保持原始副本不变。经过一些重构之后，我能够更好地利用React.addons.update()帮助程序并将其缩小一些，但我认为使用其中一个库将是下一个合乎逻辑的步骤。

至于结构/组织的东西，似乎存在Flux（或像MV *这样的其他架构）来解决这个问题，这是有道理的，因为React只是一个视图库。

操作深层嵌套的数据对象（在React中）

2 个答案: