React.js tic-tac-toe。 `キー`は本当に機能しますか？

Question

ここ

私は移動の説明に時間を追加した反応三目並べの修正版、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を除いた要素のマッチング方法を知る方法はありません。ただし、これはコンポーネントが再レンダリングされないことを意味しません。あなたの例では

は、各反復で new Date()を使用して liあなたが変更されているので liの children小道具を再レンダリングされる反応します。

あなたは状態に、historyにタイムスタンプを追加することによって、ちょうどをやろうとしているものを達成することができますhttps://codepen.io/anon/pen/gXqEqb