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

Question

我不久前遇到过新的包 Reselect。我仔细阅读了官方文档，并且已经有了第一次体验 selectors。但只有一件事我无法理解 - 组件中实现的最佳代码架构 selectors 以创建正确的记忆选择器？

所以，我有2个基本部分的代码（代码量这么大不要怕post，只是嘲讽，请只看代码逻辑结构):

1.The 第一种情况，组件持有响应其内部组件的权利render()的逻辑（经典案例）。它已连接到 Reselect selectors 并且仅接收计算值 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.The 第二种情况，组件有一个单独的逻辑来响应 render() 方法在 selectors file 中的渲染。它已迁移到 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:

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

or

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

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

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

Reselect. React. Which is the best way of usage the Reselect to gets the maximum perfomance?

javascript

reactjs

reselect