javascript - React.js 井字游戏。 `key` 真的有效吗？

Question

这里是 react tic-tac-toe 的修改版本，CodePen Here

我在移动描述中添加了时间(只是为了查看 何时 li 被呈现):

<li key={move}>
  <button onClick={() => this.jumpTo(move)}>{desc + ' ' + +new Date()}</button>
</li>

预期结果:每个列表项都有不同的时间，因为 li 有 key 它们不会被重新渲染每一步。
实际情况:每次移动时，每个 li 的时间都会发生变化(每个 li 都会被渲染)。
转到游戏开始 1512330036500
去移动#1 1512330036500
去移动#2 1512330036500
去移动#3 1512330036500
去移动#4 1512330036500
去移动#5 1512330036500


我对它应该如何表现的理解有什么问题？
有没有办法让它像我期望的那样工作？

Answer 1

通过 key 属性，React 知道如何在更新阶段匹配循环内的元素，这样它就不会在不必要的时候重新渲染它。由于 history.map 每次都返回不同的数组，因此 React 无法知道如何在没有 key 的情况下匹配元素。然而，这并不意味着组件永远不会被重新渲染。

在您的示例中，React 正在重新呈现您的 li，因为您正在使用 更改 li 的 children Prop >new Date() 每次迭代。

您可以通过将时间戳添加到history 中来实现您想要做的事情，进入状态:https://codepen.io/anon/pen/gXqEqb