コンポーネントと props

コンポーネントと props

コード写したり本文読んでいたんですが、やっぱりちょっと「コンポーネント」という考え方が身についていない。

ja.reactjs.org

概念的には、コンポーネントは JavaScript の関数と似ています。（“props” と呼ばれる）任意の入力を受け取り、画面上に表示すべきものを記述する React 要素を返します。

• 関数コンポーネントもクラスコンポーネントも React からみたら同じもの。
  • ボタン、フォーム、ダイアログ、画面も同様
• コンポーネント名は常に大文字で始める
• props は読み取り専用

なるほど、「何はなくともコンポーネント」。 ボタンもひとつのコンポーネントなんですね。

今回のサンプルコードの場合だと、 App という親コンポーネントのなかで、Card という子コンポーネントが作られている。 さらにそのなかで…という感じなのですね。

とするとデータの流れが単一方向というのはこういう感じなのかな。

で、親コンポーネントが自身の値を書き換えたいときは

親コンポーネントが自身の状態を変更する関数を子コンポーネントに渡して、 フォーム入力時に発火されるイベントにその関数を仕込んでおく

今回の場合だと、親 App コンポーネントにおいて定義した increment() や decrement() を、子 Button に Props として渡して、コンポーネント内でクリックイベントに仕込んでおくことで、親 App の props が書き換わるようになっている。