反応要素とはどういう意味ですか?

react要素は「React.createElement」関数の戻り値、つまりReactElementであり、ReactElementの構造は「const element = {Element $$typeof: REACT_ELEMENT_TYPE,key: key,ref: ref」です。 ,props: 小道具, _owner: 所有者, };"。

このチュートリアルの動作環境: Windows 10 システム、react16.9.0 バージョン、Dell G3 コンピューター。

react 要素とはどういう意味ですか?

React ソース コード | ReactElement

ReactElement と言えば、React の JavaScript (JS) を置き換えるために使用される言語である JSX について触れなければなりません。

JSX

React の公式に指定された構文として、JSX を使用すると、ユーザーは HTML コードを JS コードに挿入できます。ただし、この書き方はブラウザでは解析できません。コンバーターが必要ですが、Babel はそのような役割を果たし、コンパイル時に JSX コードを JS ファイルに変換して、ブラウザーが解析できるようにします。

どうやって変換するのですか? JSX には JS と HTMl の 2 つの記述方法があることがわかっています。JS で記述されている場合は変換する必要はありません。もちろん、絶対にそうとは言えません。時々 Babelこのため、文法を上位バージョンから下位バージョンに変換することは議論の範囲を超えています。実際に注意する必要があるのは、HTMl の処理方法です。

たとえば、このコード行:

<div id=&#39;name&#39;>Tom and Jerry</div>

Babel による変換後に生成されるコードは次のとおりです:

React.createElement("div", {
    id: "name"}, "Tom and Jerry");

HTML構文変換 JS 構文になりました 簡単に言えば、私たちが書いた JSX が最終的に JS になりました。

もっと複雑な例を書いてみましょう:

<div class=&#39;wrapper&#39; id=&#39;id_wrapper&#39;>
    <span>Tom</span>
    <span>Jerry</span></div>React.createElement("div", {
    class: "wrapper",
    id: "id_wrapper"
}, React.createElement("span", null, "Tom"), React.createElement("span", null, "Jerry"));

変換ルールは比較的単純で、React.createElement の最初のパラメータはノード タイプで、2 番目のパラメータは次のようになります。オブジェクトとしての key:value の形式のノードの属性、および後続のすべてのパラメーターはノードの子ノードです。

JSX 構文には、ネイティブ HTML ノードだけでなく、次のような多数のカスタム コンポーネントもあることに注意してください。 React.createElement の最初のパラメータが文字列ではなく変数になることがわかります。関数 Comp の最初の文字を小文字にしてみてください:

function Comp() {
    return '<div>Tom and Jerry</div>'
}

<Comp></Comp>
function Comp() {
    return '<div>Tom and Jerry</div>';
}

React.createElement(Comp, null);

React.createElement の最初のパラメータまた文字列になります。

これが、React でコンポーネントを記述するときに最初の文字を大文字にする必要がある理由です。コンパイル時に、Babel は小文字のコンポーネントをネイティブ HTMl ノードとして処理して処理します。小文字の場合、後続のプログラムはこのコンポーネントを認識できず、最終的にエラーが報告されます。

ReactElement

関数 React.createElement は、Babel によってコンパイルされた JS コードに頻繁に現れます。この関数の戻り値は ReactElement です。上記の例からわかるように、React.createElement 関数には 3 つの入力パラメーター、つまり 3 つのカテゴリがあります。

type

type は、この ReactElement のタイプを指します。

• 
  
  

#div、p などの文字列は、HostComponent

• Class と呼ばれるネイティブ DOM を表します。タイプは、Component または PureComponent から継承する、ClassComponent と呼ばれるコンポーネントです。

• メソッドは機能的な Component

• ネイティブに提供される Fragment、AsyncMode、など。シンボルは特別に扱われます。

##config

上記の Babel によってコンパイルされたコードを参照してください。ノード 属性は、Key:Value の形式で config オブジェクトに配置されます。

• children
  子ノードは複数あるため、子は 1 つだけではなく、2 番目以降のパラメータはすべて子であり、配列になります。
  

• #ReactElement の構造はこんな感じです

  
  

  function comp() {
      return '<div>Tom and Jerry</div>'
  }
  
  <comp></comp>
  function comp() {
      return '<div>Tom and Jerry</div>';
  }
  
  React.createElement("comp", null);

  
  単純なオブジェクトです。このオブジェクトの例を示します。 1 つ目は、私たちが作成した JSX です:

const element = {
    // This tag allows us to uniquely identify this as a React Element    $$typeof: REACT_ELEMENT_TYPE,

    // Built-in properties that belong on the element    type: type,
    key: key,
    ref: ref,
    props: props,

    // Record the component responsible for creating this element.    _owner: owner,
  };

これは、Babel によって次のようにコンパイルされます:

<div class=&#39;class_name&#39; id=&#39;id_name&#39; key=&#39;key_name&#39; ref=&#39;ref_name&#39;>
    <span>Tom</span>
    <span>Jerry</span>
</div>

このような要素が生成されます

rreeee

• $$typeof は定数であり、React.createElement によって生成されるすべての要素はこの値を持ちます。通常、Reactを使用したコンポーネントは親コンポーネントのthis.props.childrenにハングしますが、例外もあり、例えばモーダルボックスを実装したい場合はbodyノード配下にモーダルボックスをマウントする必要があります。 , ReactDOM を使用する必要があります。createPortals(child,container) 関数が実装されています。この関数によって生成される $$typeof 値は REACT_PORTAL_TYPE です。
  

• type は、この ReactElement のタイプを参照します。
  

• key と ref は、config オブジェクト内にある特別な設定です。
  

• #props には 2 つの部分が含まれており、最初の部分は key と ref が削除された構成で、2 番目の部分は子の配列です。配列のメンバーも React.createElement を通じて生成されたオブジェクトですが、この手順は例では省略されています。
  

• _owner は 16.7 バージョンの Fiber です。Fiber は React16 バージョンのコアであるため、当面は詳細には触れません。
  

この記事を通じて、JSX の HTML ノードが Babel を使用してネストされた ReactElement オブジェクトに変換されることを学びました。この情報は、後でアプリケーションを構築する際に役立ちます。ツリー構造は非常に重要であり、React はこれらのタイプのデータを提供することでプラットフォームの制限を打ち破ります。

推奨される学習: 「react ビデオ チュートリアル 」

以上が反応要素とはどういう意味ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。