在React中管理一个大型状态树

时间:2016-05-06 08:05:24

标签: javascript reactjs

我有一些粗略形式的数据:

父母 - >孩子 - >孙子 - >曾孙子

我已经为树中的每个级别创建了一个组件,顶部组件将整个树存储为状态,并通过props等向下传递分支给它的子级。

当顶级组件管理状态时,它负责CRUDing任何一个孩子。如果我只是想添加一个新的曾孙,我将不得不替换父组件上的整个状态树。这是一种非常低效的方法,还是React会解决哪些组件要重新渲染?是否有更好或更惯用的方法来实现我的需求?

1 个答案:

答案 0 :(得分:2)

这个React支持“keyed children”。这基本上意味着为您的所有子组件添加key={someUniqueId}属性。

“当React协调关键儿童时,它将确保任何有钥匙的孩子将被重新排序(而不是被破坏)或被销毁(而不是重复使用)。”

回答你的问题

  

这是一种非常低效的方法吗?

是的,如果您不对其中一个叶子中的每个小变化使用键控子项,则整个树将从根目录重建。