reselectのメモ化について
reselectのメモ化がどうなってるのか知りたい
ので調べました。コード自体は100行くらいで1ファイルだけだったのでとても読みやすかったです。
reselectはreduxのためのselectorライブラリです。どうやらメモ化してくれるらしいが.....?
reselectは受け取るオブジェクトを整形する関数と結果を計算する関数を受け取って、selectorを作る関数です。
以下の例だと、state => state.items
とstate => 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して使う関数から見ていきます。これは単にcreateSelectorCreator
にdefaultMemoize
を食わせているだけのようです。何もわかりませんね。
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
このselector
はcreateSelector()
の返り値そのものです。なのでこの子が実データ(一番はじめの例でいうとstate)を受け取ります。
与えられた実データをargumetns
経由で取り出します。それをデータ整形用の関数(dependencies
)に食わせます。このときdependencies
の関数たちに引数を適用する計算はselector
実行時に毎回呼ばれるのでデータ整形用の関数はコストの小さい関数を置いておくのがいいでしょう。
こうして得られた配列params
をmemoizedResultFunc
に与えます。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
。存在を知らなかったので突然定義してないやつが出てきた!?!?!?と凄い驚きました。
おわりです。ありがとうございました。