React公式ドキュメントを読んで忘れていたこと・知らなかったこと・改めて気をつけたいこと
38Koohttps://ja.react.dev/ のLearnセクションを読んで、忘れていたこと・知らなかったこと・改めて気をつけたいことをまとめる。
38Koo
このデフォルト値は size がない場合や size={undefined} を渡した場合にのみ使用されます。size={null} や size={0} を渡した場合にはデフォルト値は使われません。
propsにnullを渡した時はデフォルト値が使われない
38Koo
props とはある時点での読み取り専用のスナップショットである。レンダー毎に新しいバージョンの props を受け取る。
38Koo
JavaScript は条件をテストする際、左の辺を自動的に真偽値に変換します。しかし、左の辺が 0 の場合は、式全体がその 0 という値に評価されてしまうため、React は何もレンダーしないのではなく 0 を表示します。
これ知らなくてハマった。
38Koo
ローカルで生成されたデータ： データがローカルで生成されて保持される場合（例：ノートを取るアプリにおけるノート）は、アイテムを作成する際に、インクリメンタルなカウンタや crypto.randomUUID()、または uuid などのパッケージを使用します。
idとかが取得できない時アイテムのindexをkeyにしちゃってたけど（本当は非推奨、同リンク落とし穴の節参照）、これ今度試してみたい！
38Koo
React には “Strict Mode” という機能があり、開発中には各コンポーネント関数を 2 回呼び出します。関数呼び出しを 2 回行うことで、Strict Mode はこれらのルールに反するコンポーネントを見つけるのに役立ちます。
開発環境で関数が2回呼び出されるのは知ってたけど、純粋性を担保するためだったのか！？
38Koo
- コンポーネントが異なる環境、例えばサーバ上でも実行できるようになります！ 入力値が同じなら同じ結果を返すので、ひとつのコンポーネントが多数のユーザリクエストを処理できます。
- 入力値が変化しない場合、レンダーをスキップすることでパフォーマンスを向上できます。これが問題ないのは、純関数は常に同じ出力を返すため安全にキャッシュできるからです。
- 深いコンポーネントツリーのレンダーの途中でデータが変化した場合、React は既に古くなったレンダー処理を最後まで終わらせるような無駄を省き、新しいレンダーを開始できます。純粋性のおかげで、いつ計算を中断しても問題ありません。
パフォーマンスの観点が大きいのかな？
38Koo
イベントハンドラに渡す関数は、渡すべきなのであって、呼び出すべきではありません。
これいつもごっちゃになるのでちゃんと覚える
38Koo
React では onScroll 以外のすべてのイベントが伝播します。onScroll は、それをアタッチした JSX タグでのみ機能します。
onScrollはイベント伝播しない
38Koo
イベントが親コンポーネントに伝わらないようにしたい場合、以下の Button コンポーネントのようにして e.stopPropagation() を呼び出す必要があります
e.stopPropagation() 実際に使ったことないかも？
38Koo
- e.stopPropagation() は、ツリーの上側にあるタグにアタッチされたイベントハンドラが発火しないようにします。
- e.preventDefault() は、数は少ないですがイベントがブラウザデフォルトの動作を持っていた場合に、それを抑制します。
使いわけしっかりしないとだ。
38Koo
ローカル変数の変更は、レンダーをトリガしません。新しいデータでコンポーネントを再度レンダーする必要があることに React は気づきません。
ローカル変数の変更はコンポーネント再描画のトリガーにならない。
38Koo
コンポーネント（またはその祖先のいずれか）の state の更新。
たまに忘れちゃうけど、レンダーがトリガーされるのは初回と、祖先が更新された時