反応フラグメント：パフォーマンスを改善するための単純な構文

反応フラグメント：深いダイブ

なぜ反応フラグメントを使用するのか？

反応コンポーネントは、理想的には単一の要素を返します。 以前は、開発者はしばしばラッパーを使用して複数の要素を返していました。これにより、不必要なネスト、レンダリングが遅くなり、潜在的に無効なHTMLにつながる可能性がありました（たとえば、a

内部）。フラグメントはこれをエレガントに解決します。

反応断片を理解する

<div>フラグメントは、レンダリングされた出力に追加のマークアップを導入することなく、複数の子供コンポーネントをグループ化する方法を提供します。 それらは、2つの方法を使用して採用されています：<code><div> <code><tr> <p>明示的な構文：<strong>タグ内の子要素を包む。</strong> </p> <p>shorthand syntax：</p>空の角度ブラケットを使用<ol>。 注：Shorthand Syntaxはキーや小道具をサポートしていません <li> <strong></strong>反応フラグメントの使用方法<code><react.fragment>...</react.fragment> 2つの要素を返すA

コンポーネントを考慮してください： <>...</>または、速記を使用してください：

これは、ラッパーを使用して作成された無効なHTMLを回避します。

いつ反応する断片を使用するか

Columns <td>通常、不要なラッパー要素を追加してコンポーネントから複数の要素を返す場合は、断片を使用します。 主要なユースケースには以下が含まれます <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>function Columns() { return ( &lt;React.Fragment&gt; &lt;td&gt;Hello&lt;/td&gt; &lt;td&gt;World&lt;/td&gt; &lt;/React.Fragment&gt; ); }</pre><div class="contentsignin">ログイン後にコピー</div></div> <p></p>複数の要素を包む：<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>function Columns() { return ( &lt;&gt; &lt;td&gt;Hello&lt;/td&gt; &lt;td&gt;World&lt;/td&gt; &lt;/&gt; ); }</pre><div class="contentsignin">ログイン後にコピー</div></div>最も一般的な用途。 無効なHTMLを回避し、構造を改善します <p> <code><div> <p>キー付きフラグメント：<strong>JavaScriptコレクションを操作する場合、明示的な構文を使用すると、効率的なレンダリングのためにフラグメントにキーを割り当てることができます。 これは、Reactの和解プロセスにとって非常に重要です </strong> </p> <p></p>条件付きレンダリング：<ol>条件付きレンダリングは、追加のラッパーなしで真の枝と偽の枝の両方で複数の要素を返すことができるようにします。 <li> <p> <strong></strong>制限</p> </li> <li> <p>Shorthand Syntaxはキーや小道具を受け入れません 16.2.0以上のReactバージョンと互換性がありません <strong> </strong></p>結論</li> <li> <p>反応フラグメントは、現代の反応開発の重要な部分です。それらをマスターすると、よりクリーンで、より効率的で、より保守可能なコードにつながります。 不必要なDOMノードを回避することにより、アプリケーションのパフォーマンスの改善に貢献します。 <strong> </strong>よくある質問</p> </li> </ol> <ul> <li> <strong>メリット：</strong>コードのクリーン、パフォーマンスの向上、不要なDOMノードを回避します </li> <li>渡された小道具：<strong>フラグメントで直接サポートされていません。代わりに通常のコンポーネントを使用してください。</strong> </li> <li>互換性：<strong>反応が必要です。16.2以降 </strong> </li>div vs. fragment：<li>フラグメントは、<strong>。 </strong><code><div>キー：明示的な構文（<li>）を使用してキーを追加します <strong></strong>jsx式：<code><react.fragment></react.fragment>フラグメントは、jsx式内でシームレスに動作します。

反応ネイティブ：フラグメントもreact nativeで使用できます。

ライフサイクルへの影響：フラグメントはコンポーネントのライフサイクルに影響しません。

この包括的なガイドは、プロジェクトで反応フラグメントを効果的に利用するように装備する必要があります。