【react読破プロジェクト】day1〜packages/reactを読み始める〜

やかんです。

reactを心底理解したくなったので、リポジトリを読んでいこうと思います。

reactのディレクトリ構成

ルートのディレクトリ構成は、以下の通り。

GPTくん曰く、packagesディレクトリから読み始めるのがおすすめだそうです。従います。

めっっちゃありますね。メモとして、まず読みたいやつを太字にしてみました。

この4つですね。

reactは直接にdomを操作しない思想で作られている。「直接にdomを操作しない」というのは、要するに関心の分離だと理解している。
これが、有名な仮想domという考え方。発想としては、「仮想domというものをreactで作る！ブラウザは、これを元にdomを構築してくれるはずだ！と、信じることにする！」みたいな発想だろう。
reactは、仮想domを使って、ブラウザにおけるUIがどうあるべきかを記述する。
- 仮想domがメモリ的に重かったら、ブラウザが描画するためのdomツリーと合わせて本来必要なdomの情報量の2倍を保持する必要が出てきてしまう。
- だから、domはこの点を解消するために、独自のデータ構造を持って、軽量なものとして存在している。
reactは、「状態が更新されたらUIを更新する」という戦略をとっている。
- その際、有名な「差分のみの更新」が実行される。

gptによれば、

function App() {
  return <div>Hello, React!</div>;
}

というコードからは、

{
  type: 'div',
  props: {
    children: 'Hello, React!'
  }
}

という仮想domが生成されるらしい。

このような仮想domを元に実際のdomを生成する過程は、レンダラーが担っている。その際、レンダラーはブラウザが提供するAPIを通じて、ブラウザの描画にアプローチする。

レンダラーとして代表的なものは、react-dom。

今日のところは、終了！最後までお読みいただき、ありがとうございます。