web-dev-qa-db-ja.com

「Reselect」VS「Memoize-One」と「ReactandRedux」

Reactを使用したワークフローで何らかのメモ化を使用しようとしていますが、React and Reduxを含むワークフローと統合するための最良かつ最も重要な"easiest"ソリューションを探しています。

私は一般的なメモ化について話している多くの記事に出くわしました、そしていくつかは「メモ化-one」の使用を示して、それを起動して実行するのが最も速くて最も簡単であると支えます、そして他のものはそれについて言及せずに「再選択」について話します。

どちらがより良く、最も簡単で、どれに投資すべきかを知りたいだけです。

reactjsreduxreact-reduxmemoizationreselect
5
Ruby

両方ライブラリ関数を返すこれ指定された数の引数を受け入れるおよび値を返す：

getA(arg1, arg2, arg3) // Returns a value

differenceは、内部で何が起こるかを示しています関数が呼び出されたとき。

memoize-one

  • 提供された引数を収集する
  • 引数を前の呼び出しで提供されたものと比較します（===）
  • 引数は同じ：キャッシュされた結果を返す
  • 引数は同じではありません：結果関数を再評価して戻ります

再選択

  • 提供された引数を収集する
  • 収集された引数を提供する一連のinputSelectors関数を実行します
  • inputSelectorsの戻り値を収集します
  • inputSelectorsの戻り値を前の呼び出しで取得した値と比較します（===）
  • 値は同じ：キャッシュされた結果を返す
  • 値は同じではありません：結果関数を再評価して、

結論

memoize-oneは値ベースのメモ化ユーティリティです：メモ化提供された引数の値に対して実行されます。

reselectは、その上にさらに評価レイヤーを追加します。メモ化は引数値に対しては実行されませんが、セットの結果inputSelectors関数 =これらの初期引数が与えられます。

これは、各reselectが別のinputSelectorsセレクターになる可能性があるため、reselectセレクターを簡単に構成できることを意味します。

5
Andrea Carraro

再選択は使用していませんが、メモしてください。レンダー内の小道具から何かを計算したい場合に最適です。これは、時間の経過とともに変化する可能性があるが、一部の再レンダリングでは変化しない可能性がある小道具で、大きな配列のマッピングなどの高価な操作を実行するための優れたパターンです。これにより、レンダリングで使用されるコストのかかる操作が、入力が変更された場合にのみ再計算されます。また、getDerivedStateFromPropsのようなライフサイクルメソッドを使用する必要がなくなります（小道具から計算できる場合は、おそらく状態になってはいけません）。

import memoize from 'memoize-one'

class Example extends Component {

  mapList = memoize(
    (list) => list.map(item => ({text: item.text}))
  )

  render() {
    // if this.props.list hasn't changed since the last render
    // memoize-one will re-use the last return value from cache
    const mappedList = this.mapList(this.props.list)

    return (
      ...
    )
  }
}

ほとんどの場合、静的クラス変数を使用するのではなく、メモ化された関数をコンポーネントインスタンスにアタッチする必要があることに注意してください。これにより、コンポーネントの複数のインスタンスが互いのメモ化されたキーをリセットするのを防ぎます。

reactメモ化reactjs

2
Carey

reselectは、React/Reduxで使用するように特別に設計されているため、使用することをお勧めします。 memoize-oneは、汎用のメモ化ライブラリのようなものです。

再選択は本当に簡単に使用できます。セレクターをラップするだけです。

import { createSelector } from 'reselect';

const shopItemsSelector = state => state.shop.items;

// without reselect
const subtotalSelector = state => {
  const items = shopItemsSelector(state);
  return items.reduce((acc, item) => acc + item.value, 0);
}

// with reselect
const subtotalSelector = createSelector(
  shopItemsSelector, // list the selectors you need
  items => items.reduce((acc, item) => acc + item.value, 0) // the last argument is actual selector
)
0
Dávid Molnár