コンポーネント思考 — 画面を部品に分解する

画面を「部品の木」として見る

Reactで画面を作るとき、最初にやるのは「この画面をどんな部品に分けられるか」を考えることです。たとえばTODOリストの画面なら、全体を包む部分、上のタイトル、リスト全体、リストの中の1件…というように分けられます。それぞれをコンポーネントにします。

• Header(ページ上部のタイトルやメニュー)
• TodoList(TODOの一覧全体をまとめる部品)
• TodoItem(TODO1件分。TodoListの中で何度も使われる)
• Footer(ページ下部)

こうして分けた部品は、入れ子(ネスト)にして組み立てます。TodoListの中にTodoItemがいくつも入り、それらがApp(ページ全体)の中に入る、という木構造(ツリー)になります。この「部品を分解して組み立てる」考え方を、コンポーネント思考と呼びます。

function App() {
  return (
    <div>
      <Header />
      <TodoList />
      <Footer />
    </div>
  );
}

たとえるなら、家を建てるときにドア・窓・壁を別々の規格部品として作り、それを組み合わせるのに似ています。ドアが壊れたらドアだけ直せばよく、窓には影響しません。Reactのコンポーネントも同じで、1つの部品を直しても他の部品を壊しにくいのが強みです。

仮想DOM — 名前と役割だけ

宣言的UIのレッスンで「状態が変わると画面を作り直す」と話しました。でも毎回本物の画面を全部書き換えたら重すぎます。そこでReactは「仮想DOM」という仕組みを使います。仮想DOMとは、本物の画面(DOM)の設計図をメモリ上に持つ軽いコピーのことです。

Reactは、状態が変わると新しい設計図(仮想DOM)を作り、前の設計図と見比べて「実際に変わったのはここだけ」と差分を見つけます。そして本物のDOMには、その変わった部分だけを反映します。これで、宣言的に「全部作り直す」ように書いても、実際の画面更新は最小限で済みます。今は「仮想DOM = 効率よく画面を更新するためのReactの内部の仕組み」とだけ覚えれば十分です。

• Reactでは、まず画面を役割ごとの部品(コンポーネント)に分解して考える
• 部品を入れ子にして木構造で組み立てる
• 部品化の利点は再利用・見通し・分担の3つ
• 仮想DOMは、変わった部分だけを効率よく本物のDOMに反映するReactの内部の仕組み