Reactのお勉強2日め。今日もがんばる。
1日め => http://qiita.com/zutcho/items/a66245d4d365f5d75103
controlling componentとcontrolled component
- 個々のSquareコンポーネントで別々に状態を保持すると、コードの見通しが悪くなる。Squareの親コンポーネントであるBoardコンポーネントに、配列ですべてのSquareの状態をもたせる。（BoardはSquareをコントロールしている、SquareはBoardにコントロールされている）
- Squareの状態が変更されたら、SquareはBoardへ状態変化を通知する。Boardは状態変化を受け取り、Squareの状態が格納された配列をアップデートする。
- 具体的には、親コンポーネントが子コンポーネントをrenderするときに、子コンポーネントのイベントコールバックに親コンポーネントのメソッドを指定する。
return <Square value={this.state.squares[i]} onClick={() => this.handleClick(i)} />;で、handleClickは親コンポーネントのプライベートメソッド。
immutabilityについて
- オブジェクトをimmutableに扱うことのメリットはなんとなく知っていた。
- JavaScriptでimmutableにデータ変更を行う方法としては、
slice()を使う方法、Object.assignを使う方法、スプレッド演算子を使う方法などがある。
functional components
renderメソッドしか持たないステートレスなコンポーネントは、React.Componentをextendせずにfunctionとして書ける。将来的に、functional componentsに対する最適化もされるようだ。
今日はここまで。