reactjs - 如何在保持状态的同时更改组件顺序？

Question

设想

我有一个组件可以根据用户输入以不同的顺序重新渲染子组件。这些子组件有状态。

问题

当顺序改变时，来自一个子组件的状态会在另一个子组件中结束。举个例子，假设在第一次渲染时，我有子组件 A 和 B，按顺序排列。在下一次渲染中，顺序更改为 B 和 A。A 中的状态现在在 B 中，反之亦然。

我做了 a simpler example in Code Sandbox来说明情况。该列表保持相同的顺序，即使它在下一次渲染中被颠倒了。

我想这与 the way that React maintains state 有关跨不同的组件，其中钩子(Hook)的顺序很重要。

React 应该能够处理这种情况吗？我的代码有问题吗？如果是这样，以不同顺序重新渲染组件的正确方法应该是什么？

Answer 1

这与 react 在其虚拟 DOM 中处理元素的方式有关。

解决方案:添加一个 key ，它将起作用。

<StatefulComponent param={"Tomato"} key={"Tomato"} />,
<StatefulComponent param={"Potato"} key={"Potato"}/>

为什么会发生这种行为？

默认情况下，如果未指定键，react 将为列表中的每个组件提供一个键，该键具有最初呈现的索引顺序的值 - 这就是导致问题的原因。因为你还没有定义一个 id，React 会隐式地将你的组件变成这样:

<StatefulComponent param={"Tomato"} key={0} />,
<StatefulComponent param={"Potato"} key={1}/>

而后阵列 reverse() :

<StatefulComponent param={"Potato"} key={0} />,
<StatefulComponent param={"Tomato"} key={1}/>

您看到意外行为的原因是 React 使用键来标识每个元素。 因此，如果您在原始渲染之后更改数组顺序，然后在每个渲染上应用一个索引作为 id，react 将获取首先使用该索引渲染的元素作为它的键并将其放在该位置。 通过将键更改为唯一标识符，react 不会混淆元素(因为唯一标识符永远不会相对于其元素改变)并且现在可以按照您想要的顺序准确地呈现每个项目。

例子:
我们渲染一个列表:

<div id=1>Foo</div> // Id "1" is now bound to this element
<div id=2>Bar</div>

因此，如果您像这样重新排列列表(注意 id 更改):

<div id=1>Bar</div> // this will be transformed to <div id=1>Foo</div>
<div id=2>Foo</div> // this will be transformed to <div id=2>Bar</div>

然后 React 会将元素转换为它们首先分配给的任何 id - 这就是为什么拥有 很重要的原因。唯一标识符 .

您可以在这里阅读更多信息: https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318