memoization-は、入力されたデータに基づいてレンダリングを再計算しました

実際の開発プロセスでは、多くの場合、入力データに遭遇した、データの再計算は、レンダリングする必要があります。

このようなリアルタイムのお問い合わせなど。

一般的な方法：

1）属性変更getDerivedStateFromProps（）に従って決定され、データが更新されます。

それは、特に複雑な、財産になると、この方法では、より多くのです。

2）計算render（）メソッド内のデータ、及び使用PureComponent。

限り、このアプローチは計算をレンダリングするように、さらには他の無関係な特性ならば、それによって計算をトリガする、再レンダリングをもたらすことができます。

特に大規模なデータは、特に特性に影響を与える場合。

 

メモ化

メモ化関数は、上記の二つの方法の欠点を解決することができます。

「Memoize-1」キャッシュのみ最後の結果は、メモリリークをトリガしません。

サンプルコード：

インポートは、 '反応'から、{PureComponent}を反応させ;
以下からの輸入ReactDOM「-DOMを反応させます」。
以下からの輸入memoize 'memoize-1' ;

クラスのAppはPureComponentを{拡張します
  コンストラクタ（小道具）{
    スーパー（小道具）。 
    この .state = {
      リスト：[]
    }
    この .inputRef = React.createRef（）。
  }
  追加 =（）=> {
     この .setState（状態=> （{
      リスト：state.list.concat（この.inputRef.current.value）
    }））
  }
  {レンダリング（）
    リターン（
      の<div>
        <子リスト= { この .state.list} />
        <BR/>
        <入力はdefaultValue = "" REF = { この .inputRef} />
        <ボタンのonClick = { この .add}> ClikeMeの追加</ボタン>
      </ div>
    ）
  }
}

クラス子供{React.Componentを拡張します
  状態 = {
    フィルタテキスト：ヌル
  }
  // memoize-一つは最後のデータと結果をバッファリングすることができる。避けるメモリリーク
  // そうでなければ必要とされる値および値リストにおける前後の比較filterText getDerivedStateFromPropsの前後
  // 二重カウントを避けるために 
  フィルタを= memoizeを（
    （リスト、filterText） => list.filter（I => i.includes（filterText））
  ）
  静的getDerivedStateFromProps（小道具、状態）{
    リターン ヌル。
  }
  handleChange =（E）=> {
     この.setState（{
      filterText：e.target.value
    }）
  }
  {レンダリング（）
    CONST filterList = この .filter（この .props.list、この.state.filterText）
     リターン（
       <FORM>
        <フィールドセット>
          <伝説>フィルタリングパラメータ</伝説>
          <入力のonChange = { この .handleChange} />          
        </フィールドセット>
        {
          filterList && filterList.map（（I、指数）=> （
             <DIVキー= {I}> {索引} --- {I} </ div>
          ））
        }
      </フォーム>
     ）
  }
}
ReactDOM.render（ <アプリケーション/>、window.root）