リストのレンダー
コンポーネントのリストをレンダーする場合は、
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 をコンポーネント間で共有ができる）
参考