Pure ComponentとMemo

6158 ワード
React テキストリンク

1.Pure ComponentとMemo


reactでは、stateに関連するpropsを変更すると、すべて更新される.
しかし、これらの問題は次のとおりです.

  • 同じpropsおよびstateでも、同じ結果をレンダリングする必要はありません.
    →reactは、仮想DOM(仮想DOM)を使用して、現在の更新を以前と比較して、実際に更新する必要があるコンテンツのみをDOM要素に更新するので、パフォーマンスに大きな影響はありません.
  • componenetDidMount()のように、コンポーネントがマウントされるたびに呼び出された関数が登録され、サーバからデータを受信するなど、これらの関数で煩雑な論理が実行されると、非常に効率的に繰り返し実行される可能性があります.
    • それを防ぐためにPureComponentとMemoが使われています.
  • 系素子Pureアセンブリ
    • を用いる
    import React, { PureComponent } from 'react';
// Component를 PureComponent로 바꿔주면 된다.
class Cart extends PureComponent {
    state={
        ...
      };
    render() {
        return (
           ...
        );
    }
}
export default Cart;
  • 関数素子memoの使用
    import React, { memo } from 'react';
// 컴포넌트를 memo로 감싸주면 된다.
const Example = memo((props) => {
  ...
  return(
      ...
  );          
});

export default Example;
    (この2つは似たような特性を持っているため、いずれかのPure Componentにのみ関連しています.)stateまたはpropsに変化がない場合、render関数は実行されない.これはReact.Componentとは異なり、  shouldComponentUpdate()の実装とpropsの利用との浅い(浅い)比較には差がある.
    したがって、構成部品に複雑なデータ構造が含まれている場合、差異があるにもかかわらず差異がないと判断されるという誤った結果が生じる可能性があります.
  • 2stateとpropsの構造が単純であると予想される場合のみ  継承state
  • 深層資料の構造が変化すれば  Pure Componentまたは高速比較オーバーラップデータを使用 不変オブジェクトの使用を確認します.
    • Pure Component shouldComponentUpdate()は、コンポーネントのサブツリーに対してprops更新操作を実行しないため、サブコンポーネントが「純粋」であることを確認する必要があります。

    2. Shallow Comparison


    構成部品を更新する場合、現在の状態と新しい状態を比較する方法は2つあります.Shallow Comparisonの再整理:

  • Pure Componentの場合は、比較方法を使用し、オブジェクトの最上位参照を比較した場合は、コンポーネントを更新します.

  • Pure Component  forceUpdate()は、要素が更新される必要があるかどうかを尋ねる関数である.素子の前のpropsをstateと比較し、結果に基づいてshouldComponentUpdate()、trueを返す.
    • ❗汎用コンポーネント ライフサイクルメソッドのいずれかを実装するshouldComponentUpdateがない場合は、setStateを呼び出すたびにrender関数を呼び出す必要があります。

    3. shouldComponentUpdate()

  • 📍 例1 
    • const cart1 = { name: 'lemon' };
const cart2 = cart1;
    1. cart1 == cart2 //true
    2. ShouldComponentUpdate //false
    2つの参照値が同じであるため、更新は不要であり、false関数はShouldComponentUpdateを返す.
  • 📍 例2
    • (2つのオブジェクトが同じ値を持つ場合、それらはまったく異なるオブジェクトであるため、異なる参照値があります.)
    const cart1 = { name: 'lemon' };
const cart2 = { name: 'lemon' };
    1. cart1 == cart2 //false
    2. ShouldComponentUpdate //true
    2つの参照値が異なり、更新が必要です.すなわち、false関数はShouldComponentUpdateを返します.

    📚 reference


    https://reactjs.org/docs/react-api.html
    linux環境でのredis拡張のインストール
    [生活コード].ajaxの適用