“再选”与“追忆-一”与“反应与残存”

Question

我试图在我的工作流程中使用React的某种回忆录，我正在寻找最好的、也是最重要的“最简单”的解决方案，以便与包含React and Redux的工作流集成。

我遇到了很多关于回忆录的文章，有些文章展示了“回忆录一”的用法，并把它作为最快、最容易的起跑工具，而其他人甚至没有提到和谈论“重选”。

我只想知道哪一个更好，哪个最容易，我应该投资哪一个。

Answer 1

两个库返回一个函数，接受给定数量的参数，返回一个值

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

difference描述了当函数被称为时在下发生的事情。

回忆录一

• 收集提供的论据
• 将参数与以前调用(===)中提供的参数进行比较
• 参数是相同的：返回缓存的结果
• 参数是不一样的：重新计算结果函数和返回。

重选

• 收集提供的论据
• 运行一组inputSelectors函数，为它们提供所收集的参数
• 收集inputSelectors返回值
• 将inputSelectors返回值与以前调用(===)中获得的值进行比较
• 值是相同的：返回缓存的结果
• 值不是相同的：重新评估结果函数和返回。

结论

memoize-one是一个基于价值的回忆录实用程序：回忆录是对提供的参数的值执行的。

在此基础上，reselect添加了一个进一步的评估层：回忆录不是对参数值执行的，而是对带有这些初始参数的集合函数的结果执行的。

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

Answer 2

我没有使用重新选择，但回忆录-一个伟大的工作，当我想要计算从道具内部渲染。这是一个很好的模式来执行一个昂贵的操作，比如映射一个大数组，在道具上可能会随着时间的推移而改变，但在某些重呈现上也不会改变。它确保在渲染中使用的昂贵操作只有在输入更改时才会重新计算。它还避免了使用像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 (
      ...
    )
  }
}

请记住，在大多数情况下，您希望将回忆录函数附加到组件实例，而不是使用静态类变量。这样可以防止组件的多个实例重置对方的回忆录密钥。

反应 回忆录 反应