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が要素のインデックス。順番を逆にして覚えていた、、