なぽろぐ

気ままに感じたことを記事にまとめます。Vtuberのイベントのことと、プログラム関連のことが多めだと思います。

reselectのメモ化について

reselectのメモ化がどうなってるのか知りたい

github.com

ので調べました。コード自体は100行くらいで1ファイルだけだったのでとても読みやすかったです。

reselectはreduxのためのselectorライブラリです。どうやらメモ化してくれるらしいが.....?

reselectは受け取るオブジェクトを整形する関数と結果を計算する関数を受け取って、selectorを作る関数です。

以下の例だと、state => state.itemsstate => state.selectIdがオブジェクトを整形する関数、(items, id) => items.find(item => item.id === id)が結果を計算する関数です。

stateが変更したときどこが再計算されて、どこがメモ化されるのかを知ることでreselectの力を最大限使おうというのが本記事の意図です。

import { createSelector } from "reselect";
const state = {
  items: [
    { id: 1, name: "hoge" },
    { id: 2, name: "huga" },
    { id: 3, name: "nyan" }
  ],
  selectId: 1,
};

type State = typeof state;
type Item = State["items"] extends Array<infer U> ? U : never;
const findUser = createSelector<State, State["items"], State["selectId"], Item | undefined>(
  state => state.items,
  state => state.selectId,
  (items, id) => items.find(item => item.id === id)
)

どこがメモ化されるのか先に言うと、最後の関数(items, id) => items.find(item => item.id === id)です。この子だけstateが変更されたときに計算がスキップされることがあります。それ以外の関数state => state.items, state => state.selectIdに関しては毎回計算されます。では実際にどのようなコードで実現されているのかを見ていきます。

reselectのコードを見ていく

createSelector

まずはcreateSelector。いつもimportして使う関数から見ていきます。これは単にcreateSelectorCreatordefaultMemoizeを食わせているだけのようです。何もわかりませんね。

reselect/index.js at master · reduxjs/reselect · GitHub

export const createSelector = /* #__PURE__ */ createSelectorCreator(defaultMemoize)

defaultMemoize

どうやら関数と比較関数を受け取る関数みたいです。比較関数defaultEqualityCheckは単にa === bをするだけのコードでした。気になる方は見てみてもいいかもしれませんが、ほんとにこれだけです。

areArgumentsShallowlyEqualに比較関数(equalityCheck)、前回入力された引数(lastArgs)、今回入力された引数(arguments)を食わせます。前回と今回入力された引数を比較してshallowEqualがfalseならfuncを再計算してlastResultに再代入するという感じでしょう。

argumentsに関してはjavascript組み込みなのでMDNを見るといいと思います。

reselect/index.js at master · reduxjs/reselect · GitHub

export function defaultMemoize(func, equalityCheck = defaultEqualityCheck) {
  let lastArgs = null
  let lastResult = null
  // we reference arguments instead of spreading them for performance reasons
  return function () {
    if (!areArgumentsShallowlyEqual(equalityCheck, lastArgs, arguments)) {
      // apply arguments instead of spreading for performance.
      lastResult = func.apply(null, arguments)
    }

    lastArgs = arguments
    return lastResult
  }
}

areArgumentsShallowlyEqual

equalityCheckは比較関数、prev, nextは配列でやってくるようですね。配列の要素を総ナメして同じ値ならtrueそうでないならfalseを返すだけの関数です。

reselect/index.js at master · reduxjs/reselect · GitHub

function areArgumentsShallowlyEqual(equalityCheck, prev, next) {
  if (prev === null || next === null || prev.length !== next.length) {
    return false
  }

  // Do this in a for loop (and not a `forEach` or an `every`) so we can determine equality as fast as possible.
  const length = prev.length
  for (let i = 0; i < length; i++) {
    if (!equalityCheck(prev[i], next[i])) {
      return false
    }
  }

  return true
}

ここまででわかったことをまとめます。

  • defaultMemoizeは複数の引数を受け取る関数と比較関数(optional)を受け取る
  • defaultMemoizeは複数の引数を受け取る関数を返す

こんな感じでしょうか。次に行きましょう。

createSelectorCreator

ここでのmemoizeはdefaultではdefaultMemoizeです。...memoizeOpptionsはユーザがmemoize関数を定義したときoptionを渡したときに使うものです。今回はdefaultMemoizeが使われる前提なのでいらない子として扱います。

この関数では受け取ったデータ整形用の関数と結果生成用の関数からメモ化された関数を返します。

変数名で言うとresultFuncが結果生成用の関数。dependenciesがデータ整形用の関数です。

memoizedResultFuncは結果出力関数をdefualtMemoizeでラップしただけのものなのでselectorだけを見ていきましょう。

reselect/index.js at master · reduxjs/reselect · GitHub

export function createSelectorCreator(memoize, ...memoizeOptions) {
  return (...funcs) => {
    let recomputations = 0
    const resultFunc = funcs.pop()
    const dependencies = getDependencies(funcs)

    const memoizedResultFunc = memoize(
      function () {
        recomputations++
        // apply arguments instead of spreading for performance.
        return resultFunc.apply(null, arguments)
      },
      ...memoizeOptions
    )

    // If a selector is called with the exact same arguments we don't need to traverse our dependencies again.
    const selector = memoize(function () {
      const params = []
      const length = dependencies.length

      for (let i = 0; i < length; i++) {
        // apply arguments instead of spreading and mutate a local list of params for performance.
        params.push(dependencies[i].apply(null, arguments))
      }

      // apply arguments instead of spreading for performance.
      return memoizedResultFunc.apply(null, params)
    })

    selector.resultFunc = resultFunc
    selector.dependencies = dependencies
    selector.recomputations = () => recomputations
    selector.resetRecomputations = () => recomputations = 0
    return selector
  }
}

selector

このselectorcreateSelector()の返り値そのものです。なのでこの子が実データ(一番はじめの例でいうとstate)を受け取ります。

与えられた実データをargumetns経由で取り出します。それをデータ整形用の関数(dependencies)に食わせます。このときdependenciesの関数たちに引数を適用する計算はselector実行時に毎回呼ばれるのでデータ整形用の関数はコストの小さい関数を置いておくのがいいでしょう。

こうして得られた配列paramsmemoizedResultFuncに与えます。paramsの結果が前回と同じであれば計算をスキップし、前回の結果を返します。reselectにおいてここだけが計算が省略される部分というわけでした。

reselect/index.js at master · reduxjs/reselect · GitHub

const selector = memoize(function () {
  const params = []
  const length = dependencies.length

  for (let i = 0; i < length; i++) {
    // apply arguments instead of spreading and mutate a local list of params for performance.
    params.push(dependencies[i].apply(null, arguments))
  }

  // apply arguments instead of spreading for performance.
      return memoizedResultFunc.apply(null, params)
})

まとめ

  • 計算がスキップされるのはcreateSelectorで渡す引数のうち最後の関数だけ!
  • 最後の関数以外は毎回計算される

この2つだけわかれば十分すぎるくらいです。reselect完全に理解した!ですね!

reselectメモ化してくれることは知っていたのですが、どこメモ化されるのか全くわからずuseSelectorに食わせる関数を作ってくれる君程度にしか思ってなかったのでちゃんと理解できてよかったです。

あとarguments。存在を知らなかったので突然定義してないやつが出てきた!?!?!?と凄い驚きました。

おわりです。ありがとうございました。