リストのレンダー

コンポーネントのリストをレンダーする場合は、
for ループや配列の map() 関数
といった JavaScript の機能を使う。

イベントハンドラ

イベントへの対応は、コンポーネントの中でイベントハンドラ関数を宣言して対応。
下記だと、 handleClick() の関数内で対応を記述。

function MyButton() {
  function handleClick() {
    alert('You clicked me!');
  }

  return (
    <button onClick={handleClick}>
      Click me
    </button>
  );
}

※ onClick={handleClick} の末尾には括弧は付かない。
イベントハンドラ関数を呼び出すわけではなく、渡すだけ。
ボタンがクリックされたときに、React がイベントハンドラを呼び出す。

useState

コンポーネントに情報を「記憶」させて表示したい場合は、
コンポーネントに state を追加して対応する。
（ボタンがクリックされた回数を数えるケースなど）

まず、React から useState をインポート。

useState からは 2 つのものが得られる。

現在の state (count)
それを更新するための関数 (setCount)

（※慣習的に [something, setSomething] と記述）

同じコンポーネントを複数の場所でレンダーした場合、それぞれ場所で独自の state を持つ。
（各ボタンがそれぞれ count という state を「記憶」し、他のボタンには影響を与えない）

フック

use で始まる関数は、フック (Hook) と呼ばれる。
useState は React が提供する組み込みのフックの一つ。

（※API リファレンスで他の組み込みフックを見ることができ、
また、既存のフックを組み合わせて独自のフックを作成することも可能）

フックには通常の関数より多くの制限がある。

フックはコンポーネントのトップレベル（または他のフック内）でのみ呼び出すことができます。

条件分岐やループの中で useState を使いたい場合は、
新しいコンポーネントを抽出してそこに配置します。

コンポーネントが同じフックを利用し、一緒に更新されるようにするには、
状態を個々のボタンから「上に」移動して、それらすべてを含む最も近いコンポーネントに入れる。
-> こうすれば、どちらのボタンをクリックしても、同一のフックが利用され、連動して更新される。

props

渡される情報は props と呼ばれる。
コンポーネントはフックの状態とイベントハンドラを保持しており、それらをどちらも props として各ボタンに渡します。

例えば、ボタンをクリックすると、onClick ハンドラが発火する場合、
各ボタンの onClick プロパティはコンポーネント内の関数となっているので、その中のコードが実行される。
setCount(count + 1) というような関数が呼び出されて、count という state 変数をインクリメントした場合、
新しい count の値が各ボタンに props として渡されるため、すべてのボタンに新しい値が表示される。

（※この手法は「state のリフトアップ（持ち上げ）」と呼ばれており、
リフトアップすることで、state をコンポーネント間で共有ができる）

参考