# React勉強会_vol.9

###### tags:`勉強会中のメモ`

## おさらい

* 仮想DOMを構成するのがReact Elements
* React Elementsはコンポーネントを任意の props でコールするための実行リンクのようなもの
* Scratchでいうと、、
* ブロック: コンポーネント
* ロジックにパラメータつきで実行する〜: React Elements
* Reactでいうコンポーネントは: JSでいう関数のようなもの
* props を引数として受け取り、戻り値としてReact Elements を返す関数
* 返された React Elements がそのコンポーネントのレンダリング結果になる。
* コンポーネントが通常の関数とちがうのは、個々に『状態』を持つことができる
* 関数コンポーネントも、仮想 DOM の差分検出処理エンジンによって React Elements ごとに状態を保持する空間が用意される。
* そのコンポーネントが持つ状態のことを state と呼ぶ
* props と state が同じである限りはその返す React Elements が変わることはない。そのどちらか一方または両方が変わると返す React Elements も変わってくる。
* →レンダリングに差分がある
* つまりpropsとstateさえ見ればOK!

## props

* コンポーネントの最大の関心事はpropsとstate
* そのなかでもpropsのがだいじ！
* state というのは極力コンポーネントに持たせるべきではない
* ←副作用の原因となるコンポーネントの state を極力持たせないようにしたい
* 純粋関数: 引数が同じなら戻り値も同じ
* propsだけ=純粋関数
* 純粋関数だけで構成すると副作用が起きない理想のアプリに！
* 受け取り方
* コンポーネントの実装が関数だった場合はその関数の第 1 引数として
* クラスだった場合は初期化時にそのメンバーオブジェクトprops として設定される

## state