🦁
React基礎
はじめに
やりたいことは無限にあるのに体が足りないですね、
でも少しでも！復習を兼ねて進めていきます！
コンポーネントを分けよう
- 1ファイル＝1コンポーネントにするべき。
なぜコンポーネントを分けるのか？？
- 役割を明確にする
- 大規模アプリでも管理しやすくするため
- 再利用するため
別ファイルのコンポーネントはどう使う？？
JavaScriptのモジュール機能
- プログラムをモジュールという単位に分割する
- 原則1ファイル＝1モジュール
- 必要な時に必要なモジュールのみ読み込む
default export(名前なしexport)
- 推奨されるexport方法
- 1ファイル=1export
とちゅう。。。
Reactを使わない画面描画
HTMLのツリー構造🌳
- ブラウザは HTMLという文書（ドキュメント）を画面に描画する
- DOM（Document Object Model）= HTMLにアクセスする窓口
- DOMを直接変更してHTMLを再描画するのはコストが高い
（実際のDOM操作はブラウザのレイアウト再計算や描画などの高コストな操作を引き起こす）
仮想DOMという解決策
仮想DOM上での操作は実際のDOM上での操作よりもずっと高速！（JavaScriptのメモリ内で完結するため。）
-
ブラウザのDOMツリーをJavaScriptのオブジェクトとして扱う
ブラウザに負荷をかけずJavaScriptエンジンのメモリを使う
効率の良い再描画（レンダリング）を行うことが目標 -
DOMの状態をJavaScriptで管理することができる
Reactのコンポーネントは「状態をもつUI」
差分描画
Reactがコンポーネントの再描画を行う際には、まず新旧の仮想DOMを比較し（Diffing）、
実際のDOMに必要な最小限の変更を適用します！
この差分描画により、Reactは実際のDOMへの操作を最小限に抑え、高いパフォーマンスを維持します！
全体を再描画するのではなく、変更が必要な部分だけを対象に更新を行うため、
大量のデータを扱う大規模なアプリケーションでも効率的に動作します🙆🏻♀️
Discussion