React.js tic-tac-toe。 “钥匙”真的有效吗？

Question

以下是反应性tic-tac-toe的修改版本，CodePen Here

我为移动说明添加了时间（仅在 li呈现时才看到）：

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

预期结果：每个列表项都有不同的时间，因为li有key个，所以每次移动都不会重新呈现。
实际发生的事情：每次移动时，每次li次更改（每次li都会呈现）。 Go to game start 1512330036500 Go to move #1 1512330036500 Go to move #2 1512330036500 Go to move #3 1512330036500 Go to move #4 1512330036500 Go to move #5 1512330036500

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

Answer 1

使用key道具，React知道如何在更新阶段匹配循环内的元素，因此如果没有必要，它不会重新渲染它。由于history.map每次都返回一个不同的数组，因此React无法知道如何在没有key的情况下匹配元素。但是，这并不意味着组件不会被重新渲染。

在您的示例中，React正在重新呈现您的li，因为您在每次迭代时都使用li来更改children的{​​{1}}道具。

只需将new Date()的时间戳添加到状态：https://codepen.io/anon/pen/gXqEqb

，即可实现您的目标。