Какова наилучшая практика использования избыточного состояния внутри компонентов?

Question

Допустим, у меня есть большой объект хранилища, и мне нужен только маленький кусочек его на компонент. Какова наилучшая практика для управления состоянием внутри каждого компонента?

два подхода, которые я рассмотрел, это либо установка внутреннего состояния компонента в соответствии со срезом состояния, которое мне нужно в componentDidMount (), либо присвоение const этому слайсу в render (). какая польза / недостаток у каждого? они оба обновляются всякий раз, когда что-то изменяется, и все мои changeHandlers вызывают действия в хранилище, вместо непосредственного изменения состояния компонента. просто чтобы быть очень конкретным, я использую mapStateToProps и мне нужно только назначить срез какой-то внутренней переменной, потому что для доступа к срезу требуется object.map, и я хочу сделать это только один раз для каждого компонента, а не каждый раз, когда я необходимо получить доступ к состоянию (если бы я мог просто сделать this.props.storeName.someProp.value каждый раз, я бы сделал)

установка во внутреннее состояние

class LoginPrimaryCell extends Component {
  state = {
    data: this.props.storeFeatures.data.find(element => element.feature === 'login').settings
  }

 componentDidMount() {
     this.setState({ data: {...this.props.storeFeatures.data.find(element => element.feature === 'login').settings}})
  }

 handleChange = (event, name) => {
    this.props.editFeature({feature: 'login', setting:'checkbox', value: event.target.checked}) //editFeature is an action on store
  }

render() {
...rest of component...

присваивание const

class LoginPrimaryCell extends Component {

 handleChange = (event, name) => {
    this.props.editFeature({feature: 'login', setting:'checkbox', value: event.target.checked}) //editFeature is an action on store
  }

render() {
 const data = {...this.props.storeFeatures.data.find(element => element.feature === 'login').settings}
}

Все, что я ищу, - это лучшая практика для этой ситуации, и каковы преимущества / недостатки каждого подхода. альтернативно, если разницы практически нет, а это все личные предпочтения. Спасибо!

Answer 1

В идеале лучшее место для фильтрации / поиска элементов - это использовать селектор memoized в mapStateToProps вместо передачи всех данных компоненту и фильтрации в нем, если только вы не хотите фильтровать условие, которое устанавливается в пределах состоянияреактивного компонента.

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

Установка отфильтрованных данных в состояние не очень правильное решение, так как вы не будете часто обновлять это состояние, а также вам потребуетсяобновите это состояние, когда ваши storeFeatures реквизиты или условия фильтра изменятся, что немного громоздко