React？ コンポーネント？
そのプログラミング言語、「何となく」で使っていませんか？これを読めば頭の中が整理されるでしょう。
混乱の主な理由である、JSXとReact内で続いているものの間にある抽象概念層については、あまり語られることがありません。この疑問を解くためには、私たちはその抽象概念を深く掘り下げていく必要があります。
まずReactについての絶対的な基礎となる部分を見ていくことから始めましょう。
Reactとは何でしょうか？
Reactとは、ユーザーインターフェース(人間とコンピュータの間のインターフェース)を構築するための図書館のようなものです。
ReactあるいはReactエコシステムがいかに複雑であっても、ReactはUIsを構築するための核となるものです。
このことを気に留めつつ、最初の定義であるエレメント(要素)を見てみましょう。
簡単に言えば、React要素とはあなたがスクリーン上で何を見たいかということです。簡単には言い表せませんが、React要素とはDOMノードのオブジェクト表現のことです。
React要素は実際、あなたがスクリーン上で見たものではなく、単にその物体表現であるということを気に留めておくことが重要です。
このことにはいくつかの理由があります。
まず、JavaScriptのオブジェクトは軽量であるという点です。つまり、Reactは多くの経費を費やすことなく、これらの要素を作成したり破壊したりすることができるのです。
第2の理由は、Reactがオブジェクトを分析することができるという点であり、実際のDOMを分析し、変化が起こった個所でのみ、実際のDOMを更新することが可能です。
DOMノード（別名React要素）の物体表現を作成するために、私たちはReactのcreateElementメソッドを用いることが可能です。
createElementは、3つの議論を呼び起こします。
一つ目は、タグ名ストリング（div、spanなど）です。
二つ目はあなたが要素であることを望むさまざまな特性のことです。
三つ目は要素（この場合は「ログイン」というテキスト）の内容または要素を構成している要素のことです。
そして、それらの要素がDOM（ReactDOM.renderを使用）に付与されるとき、私たちはこのような新しいDOMノードを保持することになります。
Reactを学ぶ上で面白いことは、一般的に、あなたが教わる最初のものが構成要素であるという点です。
「構成要素は、Reactの基礎的な要素となるもの」ですが、要素の話からこの文章が始まったことを気に留めておいてください。
なぜならあなたはいったん、要素について理解することになるからです。構成要素を理解することによって、その後の理解もスムーズになります。構成要素とは、オプションで入力を受け入れ、React要素を返す機能あるいはClassのことです。
定義上、私たちはonLogin入力を受け入れ、React要素を返すButtonコンポーネントを保持しています。
注意しなければいけないことは、私たちのButtonコンポーネントがonLoginメソッドをその支柱として受け取るということです。
DOMの私たちの物体表現を理解するためには、ちょうどID属性について行ったのと同様に、createElementに関する2回目の議論が行われることになるでしょう。
さらに詳しく見ていきましょう。
この時点までは、私たちはネイティブHTML要素（”span”、”div”など）の「タイプ」プロパティでReact要素の作成をカバーするだけでしたが、今やcreateElementの最初の議論に他のReactコンポーネントを取り入れることも可能です。
しかしながら、HTMLタグ名とは異なり、Reactがclassや機能を最初の議論とするならば、それが表す要素をチェックしていかなければなりません。
そして、それが議論の支柱となります。最初の議論としてクラスや機能を持つcreateElementがなくなるまで、Reactは続きます。
アクションの中でこれを見てみましょう。
上記の通り、私たちは2つの構成要素を保持しています。
ButtonとUserです。DOMにおけるユーザーの物体表現は、2つの要素であるユーザーの名前とButton構成要素を含む「p」とともに、「div」となります。
それでは返ってきたものと、createElementを変換しましょう。
上記のコード内で、私たちは「button」、「div」、「p」そしてButtonという4つの異なるタイプの特性を持っていることに気づくでしょう。
Reactが機能またはクラスのタイプで要素を見る場合（上記の”type：Button”のように）、どの要素を返すかわかっているのかを構成要素と相談し、対応する柱を与えられます。
そのことに留意すれば、プロセス終了後に、ReactにはDOMtreeの完全な物体表現があることがわかるでしょう。
この全てのプロセスは、Reactの調停と呼ばれます。
それは、setStateやReactDOM.renderが求められるたびに、引き起こされます。
さあ、今一度、このブログを書くきっかけになった最初の疑問について振り返ってみましょう。
この時点で、重要な部分を1つ除いて、この質問に答えるためのあらゆる知識が私たちには備わっています。
あなたはDOMの物体表現を作成するためにReact.createElementを使わず、おそらく代わりにJSXを使うでしょう。混乱の主な理由である、JSXとReact内で続いているものの間にある抽象概念層については、あまり語られることがありません。この「抽象概念層」というのは、JSXが常にBabelを介してReact.createElementを起動していくだろうということです。
最初に挙げた例をもう一度見てみましょう。このコードです。
これはJSXが生じた結果です。
最後に、＜Icon/＞のような構成要素について、全てを書くことになった場合、私たちはそれを何と呼べばいいでしょうか？
JSXが起こった後から、私たちはそれを「要素作成」と呼ぶことができるでしょう。
これら全ての例は、「React要素作成」に関するものです。
※本稿は「React Elements vs React Components」を翻訳・再編集したものです。
おすすめ新着記事
おすすめタグ