はじめに
この記事ではYoutubeチャンネル【とらゼミ】トラハックのエンジニア学習講座にて投稿されている「新・日本一わかりやすいReact入門【基礎編】」をまとめることで自分のReactへの理解を復習し、より理解を深めていきたいと思う。
フロント学習の最高の教材集にて紹介されていたため発見。
非常にわかりやすくReactの基礎が解説されておりオススメ。
0.1 Reactの基礎知識
ここではReactの概念と生まれた経緯が説明される。
Reactとは
- Facebook社(現Meta社)が開発したUIライブラリ
UI(User Interface)ライブラリ = Webブラウザで見ている画面を作成するためのライブラリ
特徴
- コンポーネントという概念を使って画面構成を構築する
コンポーネントとはUI(見た目)+機能(動画を再生、停止させるなど)
Reactの目指す地点
React以前の課題は、DOMの直接更新によるHTMLの再描画負荷が高いことだった。
説明:
- ブラウザはHTML文書を画面に描画する機能を持っている
- HTMLの要素をjavascriptなどのプログラミング言語で変更したい場合そのままでは直接変更できない(HTML自体はただの文書のため)
- HTML要素を操作するために DOM(Document Object Model) という仕組みを利用している
- DOMはHTMLにアクセスする窓口のようなもので、プログラミング言語とHTMLの仲立ちをしてくれる
- DOMを直接変更すると複雑で重い処理が裏側で走るためブラウザに負荷がかかる
上記を解決するため仮想DOMを使用する(以下は勝手な解釈)。
従来: javascript -> DOM -> HTML
React: javascript -> 仮想DOM -> DOM -> HTML
説明:
- DOMをjavascriptのオブジェクトとして表現する
- DOMを操作したい場合、まず仮想DOMを変更する
- 仮想DOMの変更処理が完了したら、仮想DOMとDOMの差分に対して変更処理をDOMに促す
- DOMは変更処理をブラウザに反映する
つまりこういうことだろうか。
- DOMを直接変更すると最終的なDOM状況に至るまでの過程で余分な再描画処理が走る
- 仮想DOMを用いることで処理が完了した時点の最終的な差分のみをDOMに伝えられる
- 結果ブラウザへの負荷が従来より小さくなる