フラグメント対反応

1657 ワード
テキストリンク

ディーフタグ
<div>
   Hello world
</div>
divには、プロトタイプの要素htmldivelement - htmlelement - element - node - eventtargetがあり、ドキュメントフラグメントにはDocumentFragment - node - EventTargetがあります.つまり、divにはより多くのメソッドとプロパティがあります.

フラグメントフラグメント
<React.Fragment>
   Hello world
</React.Fragment>
  • フラグメントは、無効HTMLの問題を引き起こす可能性があるラッパーのdivを排除し、コンポーネントのスタイリングに加えて、彼らが速く、DOMがより混乱しているという事実を、私は彼らが使用する価値があると言うだろう.

    • 短い構文
    <>
   Hello world
</>
    この構文でキーのようなプロパティを追加できません.

    反応フラグメントの利点
  • コード可読性
  • はJSX
    • の前に可能でない特徴を加えました
  • より良い意味のJSXマークアップ.ラッパー要素は、強制されないために必要に応じて使用されます.
  • より少ない全体的なDOMマークアップ(増加したレンダリング性能とより少ないメモリオーバーヘッド)

    • まとめ
    これは、より高速なビットであり、より少ないメモリ使用量(余分なDOMノードを作成する必要はありません).これは非常に大きなおよび/または深い木に本当の利益を持っていますが、アプリケーションのパフォーマンスは、しばしば千のカットによる死に苦しんでいます.これは1切れです.
    フレックスボックスやCSSグリッドのようないくつかのCSS機構は特別な親と子の関係を持ち、中間にDIVSを追加することで、論理コンポーネントを抽出しながら所望のレイアウトを保つことが難しくなります.
    vueコンポーネントの値の$attrs、$listeners
    パリティ