React. パフォーマンスの向上

4629 ワード
React テキストリンク
React. パフォーマンスの向上
Γ関数、オブジェクト管理

  • 匿名関数宣言の回避

  • 関数またはオブジェクトは、変数を宣言することによって使用されます.
    • style={ { color : 'red' } } 
→ let red = { color : 'red' }  /  style={red}

onClikc={()=>{}}
→ function 선언 후 삽입
  • メモリ割り当てのパフォーマンスのメリット
    • ∮アニメーション

  • ブラウザレンダリング中のフレームが低下するため、アニメーションを避けます.

  • できるだけtransform CSSプロパティを使用します.
    • ⊙ lazy loading

  • 構成部品importは、定義された順序ですべて実行されます.

  • これにより、すべての構成部品が事前にロードされ、リソースオーバーヘッドが発生する可能性があります.

  • React.lazy関数を使用すると、ダイナミックインポートを使用して構成部品をレンダリングできます.
    •  import React, { lazy } from 'react';

 // import Detail from '/detail.js';
 let Detail = lazy(()=>{ return import('./Detail.js')});

 <Suspense fallback={<div>loding...</div>}>
     <Detail/>                    
 </Suspense>
    ⊙ memo

  • コンポーネント内のpropsまたはstateが変更されると、すべてのHTMLが再レンダリングされます.

  • すなわち、Mと呼ばれる1つの素子にAとBと呼ばれる2つの素子が含まれている場合、Aにのみ使用されるpropsがMで変更されると、AとBは再レンダリングされる.

  • memoという機能を使うことで、この点を改善することができます.
    •  import React, { memo } from 'react';

 let Child = memo(function(){
 });

  • 直接関連するpropsを変更しないと、memoで囲まれた構成部品は再レンダリングされません.

  • しかし、最終的には検証に必要なリソースも生成されるため、構成部品が大きい場合に使用することをお勧めします.
    • プレースホルダー
    デフォルトCRUD