这里是 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
我对它应该如何表现的理解有什么问题？
有没有办法让它像我期望的那样工作？
最佳答案
通过 key 属性，React 知道如何在更新阶段匹配循环内的元素，这样它就不会在不必要的时候重新渲染它。由于 history.map 每次都返回不同的数组，因此 React 无法知道如何在没有 key 的情况下匹配元素。然而，这并不意味着组件永远不会被重新渲染。
在您的示例中，React 正在重新呈现您的 li，因为您正在使用 更改 每次迭代。li 的 children Prop >new Date()
您可以通过将时间戳添加到history 中来实现您想要做的事情，进入状态:https://codepen.io/anon/pen/gXqEqb
关于javascript - React.js 井字游戏。 `key` 真的有效吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47622528/