在 React 中管理大型状态树

Question

我有一些粗略的数据：

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

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

由于顶层组件管理状态，它负责对任何子组件进行 CRUD。如果我只是想添加一个新的曾孙，我将不得不替换父组件上的整个状态树。这是一种非常低效的方法，还是 React 会计算出要重新渲染的组件？有没有更好或更惯用的方法来实现我的需要？

Answer 1

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

“当 React 协调键控子级时，它将确保任何具有键的子级都将被重新排序（而不是破坏）或销毁（而不是重用）。”

回答你的问题

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

是的，如果您不对其中一个叶子的每一个微小变化都使用键控子级，那么整个树将从根部向上重建。