javascript - 重新选择。 react 重新选择以获取最佳性能的最佳使用方法是哪种？

到目前为止，我还没有遇到过新包，请重新选择。我仔细阅读了官方文档，并且已经有了我的第一张selectors的经验。但是只有一件事我无法理解-哪种组件中的selectors实现最佳代码架构可以创建正确的备注选择器？
因此，我有代码的2个基本部分(不要害怕这篇文章中这么大的代码量，它只是被 mock ，请仅看代码逻辑结构):
1.第一种情况，组件拥有自己内部对组件的正确render()进行响应的逻辑(经典情况)。它已连接到Reselect selectors，并且仅接收从传入的Redux Reselect到先前已在其中缓存的该组件计算的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.第二种情况，组件具有单独的逻辑，该逻辑响应render()中的selectors file方法的呈现。它已在selectors Reselect包装器内的createSelector文件中迁移。其中selectors从Redux状态和组件逻辑函数计算并兑现所有数据，并直接在组件的render方法中仅将最终输出值扔给组件。

// 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}
    )

感谢您的帮助!

最佳答案

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

另外，您可以自行改善重新选择记忆，请从官方页面https://github.com/reduxjs/reselect#q-the-default-memoization-function-is-no-good-can-i-use-a-different-one中查看此常见问题解答

我希望它能帮助您了解您想在那里做些什么。