Hi，请问有没有听说过 reselect ？

没接触过

Reselect 是一个用于创建记忆的“selector”函数的库。

通常与 Redux 一起使用，但也适用于任何普通的 JS 不可变数据场景。

• selector 可以计算衍生数据，它允许让 Redux 存储尽可能少的 state
• selector 很高效，它只有在某个参数发生变化时才会进行重新计算
• selector 是可组合的，它可以作为其他 selector 的入参

以上是来自官方的介绍，个人简单理解：

我们可以用它包装数据（如 Redux 的 state），并利用其缓存入参的能力减少不必要的更新，从而达到性能优化，一举多得。

来看个简单的用例感受一下魅力。

import { createSelector } from 'reselect'

const shopItemsSelector = state => state.shop.items
const taxPercentSelector = state => state.shop.taxPercent

const subtotalSelector = createSelector(
  shopItemsSelector,
  items => items.reduce((acc, item) => acc + item.value, 0)
)

const taxSelector = createSelector(
  subtotalSelector,
  taxPercentSelector,
  (subtotal, taxPercent) => subtotal * (taxPercent / 100)
)

export const totalSelector = createSelector(
  subtotalSelector,
  taxSelector,
  (subtotal, tax) => ({ total: subtotal + tax })
)

let exampleState = {
  shop: {
    taxPercent: 8,
    items: [
      { name: 'apple', value: 1.20 },
      { name: 'orange', value: 0.95 },
    ]
  }
}

console.log(subtotalSelector(exampleState)) // 2.15
console.log(taxSelector(exampleState))      // 0.172
console.log(totalSelector(exampleState))    // { total: 2.322 }

用过而已

如果你正在使用 reselect，并还没去深入了解过，建议打开源码（v4.0.0 非 ts 版本一共 108 行）学习一番，因为它真的小而美。

开始源码阅读之前，我们先了解两个核心工具方法。

defaultEqualityCheck

全等比较 a b 两个参数。

function defaultEqualityCheck(a, b) {
    return a === b
}

（偷偷告诉你，这是源码第一行，真美！）

areArgumentsShallowlyEqual

主要目的是比较 prev 与 next 两组参数的差异。

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
}

如上代码片段，它遍历各元素，借助 equalityCheck 进行比对，一旦不相等就直接退出。

---

一般我们只会用到 reselect 的 createSelector 方法，那就从它开始好了。

createSelector

学习之前，我们先看看它的函数签名

createSelector(...inputSelectors | [inputSelectors], resultFunc)

它接受若干个 selector 或一个 selector 数组以及 resultFunc （最后一个）作为参数，其中resultFunc 接收前面 selector 计算出来的结果作为入参进行加工，并得到期望结果。

---

下面继续

export const createSelector = createSelectorCreator(defaultMemoize)

就一行代码：使用 defaultMemoize 作为 createSelectorCreator 的参数，并将结果导出。

看样子我们得去看看 createSelectorCreator 了。

createSelectorCreator

createSelectorCreator 接收若干个参数，返回一个接收若干个以函数为参数的方法，即 selector 。

export function createSelectorCreator(memoize, ...memoizeOptions) {
  return (...funcs) => {
    // 重新计算的次数
    let recomputations = 0
    // 使用时传入的最后一个参数
    const resultFunc = funcs.pop()
    /*
        pop 最后一个参数后，前面参数的都是依赖，可参考 createSelector 的函数签名
        如果传入的依赖不全是函数，将会抛出错误
    */
    const dependencies = getDependencies(funcs)

    /*
        根据上文函数签名，resultFunc 接收其他 selector 参数的计算结果作为参数
        并使用记忆函数缓存入参，使用 recomputations 统计重新计算次数
    */
    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

      // 一一计算依赖 selector 的结果，存入 params 作为 resultFunc 的入参
      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 上的其他属性可以在开发单测时使用
    selector.resultFunc = resultFunc
    selector.dependencies = dependencies
    selector.recomputations = () => recomputations
    selector.resetRecomputations = () => recomputations = 0
    return selector
  }
}

看完以上代码，带着疑问来看看 memoize 是何方神圣

defaultMemoize

在 createSelector 中使用的是默认的 defaultMemoize 。

// func 即要调用的函数，equalityCheck 默认使用提到的全等判断 defaultEqualityCheck
export function defaultMemoize(func, equalityCheck = defaultEqualityCheck) {
  // 前一次参数
  let lastArgs = null
  // 前一次执行结果
  let lastResult = null

  // 借助闭包缓存前一次执行的参数与结果，仍返回一个函数
  return function () {
    // 如果前后两次参数不一样，则执行 func，否则返回之前的执行结果 lastResult
    if (!areArgumentsShallowlyEqual(equalityCheck, lastArgs, arguments)) {
      // apply arguments instead of spreading for performance.
      lastResult = func.apply(null, arguments)
    }

    lastArgs = arguments
    return lastResult
  }
}

defaultMemoize 是 reselect 的核心方法，它借助闭包保存前一次参数与结果，通过比对前后参数的差异来决定是否需要执行原 func，达到记忆函数的目的。

自定义

如果觉得 createSelector 不能满足你的性能追求，reselect 完全支持用户通过 createSelectorCreator 使用自定义的 memoize 与 equalityCheck 。

详细的使用在官方文档中也有提到，不再展开。

---

以上就是对 reselect createSelector 的完整链路源码分析，在这份“小而美”的源码中并没有太多出奇的地方，现在回到文章题目：Reselect 为什么可以优化 React 项目性能？

我想认真看完以上分析的各位应该都能回答一二。

reselect 使用闭包保存上一次的参数 lastArgs 与结果 lastResult ，只有当依赖中的某个 Redux state 发生了变化，导致前后参数比对不一致了，才会触发 selector 的再次计算。这避免了 react 组件的不必要的更新，从而达到了性能优化的效果。

还能更优吗？

但还没完，我们会发现真正在项目使用过程中，往往会有需要使用变量查询型的 selector，如：

const conversationLastMessageSelector = (conversationId: string) => createSelector(
  getMessageSelector(conversationId),
	entitySelector,
  (messages, entity) => {
    // ...
  }
)

通过上诉分析，我们知道对于 conversationLastMessageSelector 这个 selector，仅仅只会缓存输入的 conversationId 与上一次相同的结果，对于实际列表使用场景来说，缓存将不复存在。

学习 Faster JavaScript Memoization For Improved Application Performance，我们得到高效而又简单的缓存函数

function memoize (f) {
  return function () {
    const args = Array.prototype.slice.call(arguments)

    f.memoize = f.memoize || {}

    return args in f.memoize
      ? f.memoize[args]
      : (f.memoize[args] = f.apply(this, args))
  }
}

不难看出，我们可以使用高阶缓存函数 memoize 包裹 conversationLastMessageSelector，它将实现对每个 conversationId 的记忆函数的缓存，大概如下

f.memoize = {
    123: function memoize() {...},
    234: ...
    345: ...
}

通过 f.memoize 实现了变量查询型 selector 的缓存相比无缓存版本对 React 组件渲染有质的优化效果。但不同的 conversationId 对应的缓存函数都在挂载在 f.memoize 上，如果没有加任何缓存策略进行维护，不断增加的 conversationId 将给运行时内存带来损耗，用户需要权衡决定最佳实践。