javascript - 重新选择。 react 。 Reselect 获得最大性能的最佳使用方法是什么？

Question

我最近才遇到过重新选择这样对我来说很新的包。我仔细阅读了官方文档，并且已经对我的第一个 selectors 有了经验。但只有一件事我无法理解 - 在组件中实现 selectors 以创建正确的内存选择器的最佳代码架构是什么？

所以，我有2个基本的代码部分(不要害怕这篇文章中如此庞大的代码量，它只是 mock ，请只看代码逻辑结构):

1.第一种情况，组件拥有响应其内部组件的正确render() 的逻辑(经典案例)。它已连接到 Reselect 选择器 并且仅接收 Reselect 从传入的 Redux state 抛出到此组件的计算值，该组件先前已缓存在

// imports Reselect selectors calculated value
import { ID, additionalInfo} from './selectors'

class Row extends Component {
  // component the responce for right render logic of the component based on Reselect values
  _progress = (ID, additionalInfo) => {
    const { statusEffects = [] } = additionalInfo
    const { timePercent: timeDisabled = 0 } = statusEffects[1] || {}
    const inactiveRows = rowID === 1 || rowID === 2
  
    const isDisabled = inactiveRows ? false : statusEffects[1] && statusEffects[1].disabled
    const isStatus = (statusEffects[1] && statusEffects[1].title) === 'Checkpoint'
  
  
    const progressOff = inactiveRows ? 0 : parseInt(timeDisabled.toFixed())
    const statusCheckpoint = isDisabled ? `${progressOff}%` : `${progressOff}%`
    const statusG = isDisabled ? `${progressOff}%` : `${progressOff}%`
    const status = isStatus ? statusCheckpoint : statusG
  
    return {
      isDisabled,
      progressOff,
      status
    }
  }

  render() {
    // calculated values inside own component method based on values from Reselect selectors
    const { isDisabled, progressOff, status } = this._progress(ID, additionalInfo)

    return ( 
      //...some view logic 
      {isDisabled + progressOff + status}
    )
  }
}

2.第二种情况，组件有一个单独的逻辑来响应selectors file中的render()方法的渲染。它已迁移到 Reselect createSelector 包装器内的 selectors 文件中。其中，selectors 计算并兑现来自 Redux 状态和组件逻辑函数的所有数据，并直接在组件的渲染方法中仅将最终输出值抛给组件。

// createSelector logic with all component render logic
export const progress = createSelector([getId, getAdditionalInfo], (ID, additionalInfo) => {
  const { statusEffects = [] } = additionalInfo
  const { timePercent: timeDisabled = 0 } = statusEffects[1] || {}
  const inactiveRows = rowID === 1 || rowID === 2

  const isDisabled = inactiveRows ? false : statusEffects[1] && statusEffects[1].disabled
  const isStatus = (statusEffects[1] && statusEffects[1].title) === 'Checkpoint'


  const progressOff = inactiveRows ? 0 : parseInt(timeDisabled.toFixed())
  const statusCheckpoint = isDisabled ? `${progressOff}%` : `${progressOff}%`
  const statusG = isDisabled ? `${progressOff}%` : `${progressOff}%`
  const status = isStatus ? statusCheckpoint : statusG

  return {
    isDisabled,
    progressOff,
    status
  }
})

// component that gets calculated reselect values
class Row extends Component {
  render() {
    // recives the whole calculated values from Reselect selectors
    const { isDisabled, progressOff, status } = progress

    return ( 
      //...some view logic 
      {isDisabled + progressOff + status}
    )

And what I want to ask - if there are some performance differences of such two ways of Reselect usage? Which one is best on your think:

1. Throw from Reselect on component only the calculated values from selectors that grabbed and cashed from Redux state

or

2. Place all component render logic inside Reselect createSelector func and throw on the component only the final calculated values?

如果您提供任何帮助，我将不胜感激!

Answer 1

有两种情况都是对的。显然，这个问题没有明确的答案。对于可以在组件的 render 方法中发现的每个计算，您应该使用 reselect。

此外，您还可以自行改进 Reselect 内存，请参阅官方页面的常见问题解答:https://github.com/reduxjs/reselect#q-the-default-memoization-function-is-no-good-can-i-use-a-different-one

我希望它能帮助你理解你想在那里做什么。