Свойство экземпляра класса React предотвращает использование PureComponent

У моего компонента React есть реквизит, который представляет собой экземпляр класса, основанный на данных, поступающих из хранилища избыточности.

Причина этого в том, что гораздо удобнее работать с этими данными, используя класс и все его пользовательские методы (более 50).

Я не могу использовать PureComponent, поскольку React всегда считает, что эта опора изменилась. Проблема в том, что большинство моих компонентов React подключены к этому реквизиту...

Я знаю о таком решении, как повторный выбор, но это означало бы наличие слишком большого количества (столько, сколько у моего класса есть настраиваемые методы) селекторов только для манипулирования этими данными.

Что ты предлагаешь?

Мой выбор редукса выглядит так:

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

react-native reactjs redux reselect
person Vincent Toupet    schedule 27.09.2017    source источник
comment
Можете ли вы опубликовать соответствующие части вашего кода?   -  person Or B    schedule 27.09.2017
comment
Вы пробовали ImmutableJS?   -  person hawk    schedule 27.09.2017
comment
Тоже хотелось бы увидеть код. Особенно там, где вы создаете свой экземпляр класса.   -  person jonahe    schedule 27.09.2017
comment
Вам необходимо предоставить нам минимально воспроизводимый пример, чтобы нам было проще вам помочь. Вы создаете новый экземпляр класса каждый раз, когда что-то обновляется? @hawk как поможет использование ImmutableJS?   -  person Tom Fenech    schedule 27.09.2017
comment
Действительно, каждый раз в селекторе создается новый экземпляр.   -  person Vincent Toupet    schedule 27.09.2017
comment
@TomFenech Чтобы использовать PureComponent, вам нужны неизменяемые данные для правильной работы shallowCompare .. поэтому каждый раз, когда вы меняете свои данные, результатом будут новые данные, immutablejs предоставляют все это + умные алгоритмы сравнения   -  person hawk    schedule 27.09.2017
comment
Хорошо, но ОП говорит о реквизите, который является классом - похоже, им нужно будет полностью изменить это, чтобы ImmutableJS был вариантом.   -  person Tom Fenech    schedule 27.09.2017
comment
@VincentToupet У вас было время попробовать мое предложение? При удаче?   -  person jonahe    schedule 27.09.2017

Ответы (1)


arrow_upward
0
arrow_downward

Вы пытались использовать 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, изменилась. (Вместо создания нового экземпляра каждый раз, когда изменяется что-либо в состоянии.)

person jonahe    schedule 27.09.2017
comment
Большое спасибо @jonahe, это работает как шарм. Это поможет мне удалить много ненужного кода из методов shouldComponentUpdate моих компонентов. - person Vincent Toupet; 27.09.2017