---
# System prepended metadata

title: React勉強会_vol.9
tags: [勉強会中のメモ]

---

# 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

