はじめに
<Hello />のようなコンポーネントは最終的にどうやってブラウザに描画されるの？とふと思ったので、備忘録的にまとめていきます。
つまり、ReactとJSXがどのように連携して仮想DOMを構築し、最終的に実際のDOMを更新するかをまとめます。
コンポーネントの定義
Reactでは、コンポーネントは再利用可能なUIの一部を表現します。一般的には個々のファイルに定義され、必要に応じて他のファイルからインポートされます。
export function Hello() {
return <h1>Hello, world!</h1>;
}
JSXとReact要素の作成
上記の書き方はJSXと呼ばれ、React.createElement()のシンタックスシュガー = 糖衣構文です。
React要素を作成するには、本来このようなAPIを呼ぶ必要があります。
それぞれtype,props,childrenという引数を取り、React要素を作成します。
const element = React.createElement(
'h1', // type
null, // props
'Hello, world!' // children
);
一方で、JSXではより直感的にHTMLに近い書き方でReact要素を作成することができます。
export function Hello() {
return <h1>Hello, world!</h1>;
}
シンタックスシュガーではありますが、JSXからReact要素を作成するには、Babelなどのトランスパイラを使用してJSXを通常のJavaScriptに変換する必要があります。これは、ブラウザやNode.jsはJSXを直接理解することができないからです。この変換過程で、JSX内のタグはReact.createElement()の呼び出しに変換されます。
<Hello />は、トランスパイラによって次のようにトランスパイルされます。
React.createElement(Hello)
これは、React.createElement関数が、指定された型（この場合はHello）とプロパティで新しいReact要素を作成することと同じ意味です。
仮想DOMへの追加と差分評価
このReact要素は、仮想DOMに追加され、最終的に実際のDOMにレンダリングされます。
仮想DOMに追加するには、ReactDOM.render関数を用いることができ、以下の様な引数を取ります。
ReactDOM.render(
//1.React要素,
//2.DOM要素
)
ReactDOM.render()が呼び出されると、Reactはメモリ内に仮想DOMツリーを作成し、各コンポーネントの状態を管理します。
Reactは実際のDOMとの結果の差異を計算することで、ブラウザに表示されていて「実際に表示変更が必要となるコンポーネントのみ」を効率的にレンダリングします。
export function Hello() {
return <h1>Hello, world!</h1>;
}
import { Hello } from './Hello';
function App() {
return <Hello />;
}
ReactDOM.render(
<App />,
document.getElementById('root')
)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>React App</title>
</head>
<body>
<div id="root"></div>
<script src="./App.js"></script>
</body>
</html>
まとめ
-
JSXはReact.createElementのシンタックスシュガー -
JSXはReact.createElementに変換するにはBabelなどのトランスパイラが必要 -
ReactDOM.renderが呼び出され、実際のブラウザとの差分をReactが評価することで、差分のコンポーネントのみレンダリングされる