2022年4月16日 りあクト！ 第5章 JSXでUIを表現する（p.11~)
JSXとは
- 名前の由来は『JavaScript』と『XML』の組み合わせです。
- XMLライクな記述を出来るようにしたECMAScript2015を構文拡張したものです。
- JSXは、コンパイル後に
React.createElementになります。 - React.createElementを実行すると、ReactElementオブジェクトを生成します。
JSXで何が出来る？
- JSXによって、XMLのタグとその組み合わせによるノードツリーをJavaScriptの中で書くことが出来るようになります。
- JSXはJavaScriptにおけるオブジェクトを表現する式に還元するため、変数に代入したり、狭義のオブジェクトのプロパティ値にしたり、関数の引数や 戻り値にすることも出来ます。
const element = <span>foo</span>;
const obj = { bar: element };
const wrap = (element) => <div>{element}</div>;
なぜReactは見た目とロジックを混在させるのか
コンポーネントのロジック、たとえば表示のためのデータをどうやって取得するかとか、 起こったイベントをどう処理するかとか、状態の変化がコンポーネントにどう影響するかとかというのは、そのコンポーネントのレンダリングと本質的に結合したものであって、それを無理に分割してしまうことのほうが非効率だとReactでは考える
コンポーネント志向
- 機能単位で分割された独立性の高いパーツを組み合わせることでアプリケーションを構築するのがReactの開発思想です。(コンポーネント志向)
- 独立した機能単位のパーツとして分割するためには、そのパーツの中に見た目とロジックを閉じ込める必要があります。
- Reactはコンポーネント自身が、自身の描画に必要な処理を自分でやり、レンダリングもコンポーネントごとに個別で行われます。
