javascript - 在 React 中管理大型状态树

Question

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

父->子->孙->曾孙

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

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

Answer 1

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

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

回答你的问题

Is this a vastly inefficient approach?

是的，如果您不对其中一片叶子中的每个小变化使用键控子代，则整棵树将从根部向上重建。