用"ReactandRedux""重新选择"VS"Memoize-One"

我正在尝试使用React在我的工作流程中使用某种记忆,我正在寻找最好的,最重要的是"最简单"的解决方案,以便与我的工作流程集成React and Redux.

我发现很多文章都在谈论一般的memoization,有些文章演示了"memoize-one"的使用,并将其作为最快和最容易起床和运行的,其他人甚至没有提及它并谈论"重新选择" .

我只是想知道哪个更好,更简单,哪些应该投资.

两个库都返回一个函数,该函数接受给定数量的参数并返回一个值:

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

该差异奠定了在罩下会发生什么,当函数被调用.

memoize的一

收集提供的参数

将参数与之前调用中提供的参数进行比较(===)

参数是相同的:返回缓存的结果

论据是不一样的:重新评估结果的功能和回报

重新选择

收集提供的参数

运行一组inputSelectors函数,为它们提供收集的参数

收集inputSelectors返回值

将inputSelectors返回值与之前调用中获得的值进行比较(===)

值是相同的:返回缓存的结果

值是不一样的:重新评估结果的功能和回报

结论

memoize-one是一个基于值的memoize实用程序:对提供的参数的值执行memoization.

reselect在它上面添加了一个进一步的评估层:不对参数值执行memoization,而不是用这些初始参数提供的set inputSelectors函数的结果.

这意味着reselect选择器很容易组合,因为每个选择器都inputSelectors可以是另一个reselect选择器.

我没有使用过重选功能，但是当我想从渲染中的道具中计算出一些东西时，memoize-one对我非常有用。对于在道具上进行昂贵的操作（如映射大型阵列）而言，这是一个很好的模式，该道具可能会随着时间而变化，但在某些重新渲染时可能不会改变。它确保仅在输入发生更改时才重新计算渲染中使用的昂贵操作。它还避免了必须使用诸如getDerivedStateFromProps之类的生命周期方法（如果可以从props计算得出，则可能不应该处于状态）。

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 (
      ...
    )
  }
}

请记住，在大多数情况下，相对于使用静态类变量，您将需要将备注功能附加到组件实例。这样可以防止组件的多个实例重置彼此的记忆键。

反应 记忆 反应