流暢なReact

第4章. 和解の内側

この作品はAIを使って翻訳されている。ご意見、ご感想をお待ちしている：[e-mail]

Reactを本当に使いこなせるようになるには、Reactの関数が何をするのかを理解する必要がある。これまで、JSXとReact.createElement を理解してきた。また、仮想DOMについてもある程度理解できた。この章では、Reactにおける仮想DOMの実用的なアプリケーションを探求し、 ReactDOM.createRoot(element).​ren⁠der() が何をするのかを理解しよう。具体的には、Reactが仮想DOMを構築し、リコンシリエーションと呼ばれるプロセスを通じて実際のDOMを更新する方法を探求する 。

和解を理解する

簡単にまとめると、Reactの仮想DOMは、私たちが望むUIの状態のブループリントである。Reactはこのブループリントを受け取り、リコンシリエーションと呼ばれるプロセスを経て、指定されたホスト環境（通常はウェブ・ブラウザだが、シェルやiOSやAndroidのようなネイティブ・プラットフォームなど、他の環境である可能性もある）でそれを実現する。

次のコード・スニペットを考えてみよう：

import { useState } from "react";

const App = () => {
  const [count, setCount] = useState(0);

  return (
    <main>
      <div>
        <h1>Hello, world!</h1>
        <span>Count: {count}</span>
        <button onClick={() => setCount(count + 1)}>Increment</button>
      </div>
    </main>
  );
};

このコード・スニペットには、UIの状態をどうしたいかという宣言的な記述が含まれている：要素のツリー 。チームメイトもReactもこれを読み取り、私たちがカウンターをインクリメントするインクリメント・ボタンのあるカウンター・アプリを作成しようとしていることを理解できる。和解を理解するために、このようなコンポーネントに直面したときにReactが内部で何をするのかを理解しよう。

まず、JSXはReact要素のツリーになる。これは第3章で見たとおりだ。呼び出されると、App コンポーネントはReact要素を返し、その子要素はさらにReact要素である。React要素は（我々にとって）不変性であり、UIの望ましい状態を表す。実際のUIの状態ではない。React要素は、React.createElement 、またはJSXの< シンボルで作成される：

const App = () => {
  const [count, setCount] = useState(0);

  return React.createElement(
    "main",
    null,
    React.createElement(
      "div",
      null,
      React.createElement("h1", null, "Hello, world!"),
      React.createElement("span", null, "Count: ", count),
      React.createElement(
        "button",
        { onClick: () => setCount(count + 1) },
        "Increment"
      )
    )