Game コンポーネント

Gameコンポーネントを作り、Boardコンポーネントで行っていた処理をGameへ移す。BoardはSquareをrenderするだけになり、状態の保持・winnerの計算・クリックイベントハンドラはGameが担当する。
これで、Game <-> Board <-> Squareとデータが直線的に流れることになる。ここでやっとReactのデータフローの特徴が実感できた。

複数のアイテムをrenderするとき

複数のアイテムをrenderしたいときは、アイテムを配列にしてからrenderする。
それぞれのアイテムには、ユニークなkeyを設定する必要がある。Reactはkeyを使ってそれぞれのアイテムを区別する。keyはアイテムの配列の中でユニークであれば良い。
keyを変更した場合、アイテムはdestroyされてから再createされる。

気になったコード

  const squares = this.state.squares.slice();
  squares[i] = this.state.xIsNext ? 'X' : 'O';

squaresにはconst修飾子がついているが、インデックスを指定してsquares[i] = 1のような代入はOK。もちろん、squares = 1はダメ。

気になったコード 2

const moves = history.map((step, move) => {
引数は、stepが配列内の要素・moveが要素のインデックス。順番を逆にして覚えていた、、