Question

在此codepen内，有React应用程序呈现ToDo列表。 它使用.map() index参数作为key值来呈现此列表。

我在初次加载后添加了一些项目然后我看到了：

然后我按日期对其进行排序并在第一项中输入内容

然后我点击Sort by Latest并获取此信息：

问题：为什么React在按下<input>按钮后没有用文本改变Sort by Latest的位置 - 你能详细说明发生的算法或事件顺序吗？按下按钮后？

NB 是的 - 我知道使用.map（）index是此行为的来源，所以请不要在此建议更改key属性有意义的事情。这个例子很好，正确地描述了我的问题。

P.S。这是this question的分支，它询问不同的事情。

Answer 1

因为react使用key推断行的标识，如果你更新除key之外的所有字段，react会在你更新数据时看到这个但是行保持静止，在另一个极端，如果你只是更改密钥但保持所有数据相同React会将该行视为已移动。

所以问题是使用索引作为键，你要告诉你在输入框中键入的值属于第1行上的任何待办事项，因为它是给定的key道具，在使用时可排序列表，key应该是该数据的唯一内容。如果你做了

<ToDo key={todo.id} {...todo} />

您告诉您输入属于特定todo.id，然后您有一个标识符，该标识符将在排序时移动。

考虑渲染的DOM。

首先我们（某些标签被省略）。

<li><input value="this is my input text" /></li>
<li><input value="this is my second input text" /></li>

然后排序后我们有

<li><input value="this is my second input text" /></li>
<li><input value="this is my input text" /></li>

如果列表顺序已更改，或者输入字段中的值已更改，则无法单独判断，为了解决此问题，React提出了一个约定总是检查key属性并让它告诉它是否更改或移动了一行，这给了我们：

<li key=1><input value="this is my input text" /></li>
<li key=2><input value="this is my second input text" /></li>

然后排序后我们有

<li key=2><input value="this is my second input text" /></li>
<li key=1><input value="this is my input text" /></li>

但如果我们改变我们得到的文本：

<li key=1><input value="this is my second input text" /></li>
<li key=2><input value="this is my input text" /></li>

现在显而易见的是一个举动，并且编辑是什么。