Question

My React组件有一个prop，它是一个基于来自redux商店的数据的类实例。

这样做的原因是使用类及其所有自定义方法（超过50个）处理此数据会更方便。

我不能使用PureComponent，因为React总是认为这个道具已经改变了。问题是我的大多数React组件都连接到这个支柱......

我知道重新选择的解决方案，但这意味着有太多（我的班级有自定义方法的数量）选择器只用于操纵这些数据。

你会建议什么？

我的redux选择看起来像这样：

getStation(state) {
  // some logic to fetch the right station
  return new WeatherStation(state.services.stationList[i])
}

WeatherStation的位置：

class WeatherStation {
  constructor (data) {
    this.station = data
  }

  getId() {...}
  // many more methods
}

在我的React Compoonent中：

class MyComponent extends React.Component {
  ...
  const mapStateToProps = (state, ownProps) => {
    return {
      station: getStation(state),
    }
  }
}

Answer 1

您是否尝试过沿着这些方向使用reselect？

import { createSelector } from 'reselect';

getStationData(state) {
  // some logic to fetch the right station

  // no new instances here, just selecting the relevant data
  return state.services.stationList[i];
}


// create "memoized" selector. 
const getEnhancedStation = createSelector(
  getStationData,
  stationData => new WeatherStation(stationData)
)

如果我正确理解reselect和createSelector，那么只有在基础数据时才会生成新的WeatherStation实例，即。从getStationData返回的东西已经改变了。（而不是每次状态中的任何更改时生成新实例。）

React类实例prop禁止使用PureComponent

1 个答案: