Auxコンポーネント対反応断片-どちらがよりよいですか?

このブログ記事では、コンポーネントの複数の要素を返す方法を検討しますrender (クラスベースの)またはreturn (関数の場合)

どの要素を返しますか？

どのような要素が返されるのかをメモリでリフレッシュしてみましょう.JSXではJavaScriptのHTML要素を書くことができますcreateElement() //appendChild() メソッド.
例:

return() {
 <div>
  <h1>Hello World!</h1>
 </div>
}

しかし、我々はまた、「フードの下で」Babelコンパイラがあることを知っていますReact.createElement() 機能

return() {
 React.createElement('div', {}, [
  React.createElement('h1', {}, 'Hello World!')
]);
}

それで、あなたが見ることができるように.React.createElement つのタイプの要素だけを受け入れることができますdiv and h1 ) 最初のパラメータとして.JSXを関数または文から返すときには、単一の要素を返す必要があります.
例ではdiv JSX用のシングルまたはトップの要素です.

複数の要素

複数の要素を返したいなら、それを必要としないdiv コンテナ?
次の例を調べましょう

const Table = () => {
    return (
      <table>
        <tr>
          <Columns />
        </tr>
      </table>
    );
}

コンポーネント<Columns /> そのターンでは、いくつかの列をレンダリングします.

const Columns = () => {
    return (
      <div>
        <td>Column 1</td>
        <td>Column 2</td>
      </div>
    );
  }

上記のコードの結果、我々はHTMLから不正なHTMLを取得しています<Table /> ページのコンポーネント

<table>
  <tr>
    <div>
      <td>Column 1</td>
      <td>Column 2</td>
    </div>
  </tr>
</table>

解決策

この問題は2つの方法で解決できます.
1/Auxコンポーネント(補助)または
2/を使用します.フラグメントコンポーネント
両方の方法を調べましょう.

Aux (補助)コンポーネントまたは

反応の高次コンポーネントは、コードを繰り返すことなくコンポーネント間の共通の機能を共有するために使用されるパターンです.Hostは実際にはコンポーネントではありませんが、関数です.Host関数は引数としてコンポーネントを受け取り、コンポーネントを返します.コンポーネントを別のコンポーネントに変換し、追加のデータまたは機能を追加します.
要するに

const NewComponent = (BaseComponent) => {
  // ... create new component from old one and update
  return UpdatedComponent
}

他のコンポーネントのコンテナーとして使用できます(この場合、プロジェクトでは補助コンポーネントやAUXと呼ばれます).この場合、それは単にprops 引数と返り値children :

const Aux = (props) => props.children;
export default Aux;

この例ではラッパーを簡単に変更できますdiv with Aux :

const Columns = () => {
    return (
      <Aux>
        <td>Column 1</td>
        <td>Column 2</td>
      </Aux>
    );
  }

そして問題解決!

反応する。断片

反応する.フラグメントは2.0で反応しました.React.Fragment 断片がDOMに与えられないので、あなたはDOMに余分なノードを加えることなく子供たちのリストをグループ化しましょう.だから基本的に我々は反応を使用します.通常、ラッパーを使用するフラグメントdiv .
この例ではラッパーを簡単に変更できますdiv with React.Fragment :

const Columns = () => {
    return (
      <React.Fragment>
        <td>Column 1</td>
        <td>Column 2</td>
      </React.Fragment>
    );
  }

またはフラグメントは、空のタグのように短い構文で宣言することもできます.

const Columns = () => {
    return (
      <>
        <td>Column 1</td>
        <td>Column 2</td>
      </>
    );
  }

そして問題解決!

まとめ

同じ仕事をするので、両方の変形を使用することができます-余分な層を加えることなく複数のJSX要素を返すのを許してください

使用React.Fragment あなたは余分なコンポーネントを作成する必要がないので、より多くの利点があり、それは少しより速いとメモリ使用量が少ない(余分なDOMノードを作成する必要はありません).

私のブログを読んでくれてありがとう、あなたのコメントありがとうございます.