Обновление вложенных свойств состояния в React: setState

Быстрый ответ

Чтобы обновить изменяемые объекты в React, эффективно применяйте синтаксис расширения (...).

this.state = {
  user: { name: "Алиса", details: { age: 30 } }
};

Когда нужно увеличить возраст, не затрагивая остальные данные:

this.setState(prevState => ({
  user: {
    ...prevState.user,
    details: { ...prevState.user.details, age: prevState.user.details.age + 1 } 
    // Алиса отмечает свой день рождения! 🎈
  }
}));

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

Как контролировать сложность с помощью Immutability-helper

Если вам приходится работать со сложными вложенными состояниями, простой синтаксис расширения может оказаться недостаточным. В таких случаях на помощь приходит Immutability-helper.

import update from 'immutability-helper';

this.setState(prevState => update(prevState, {
  user: {
    details: {
      age: {$set: prevState.user.details.age + 1} 
      // Алиса – путешественница во времени, возраст для неё – всего лишь число!
    }
  }
}));

Это универсальное решение облегчает изменение вложенного состояния, делая процесс более понятным и упорядоченным.

Как избежать ненужной перерисовки: примечание о производительности

Обновление вложенного состояния может спровоцировать нежелательные перерисовки из-за поверхностного сравнения в shouldComponentUpdate() в React, что негативно скажется на производительности. Чтобы этого избежать, рекомендуется упростить состояние или воспользоваться MobX с наблюдаемыми объектами для более эффективного управления состоянием.

Почему прямое изменение состояния – это грубая ошибка

Прямое изменение состояния в React считается плохой практикой, которая может вызвать непредсказуемые проблемы. Всегда используйте setState или хук useState для обновления состояния:

const [user, setUser] = useState({ name: 'Алиса', details: { age: 30 } });

// Обновляем вложенное состояние
const updateUserAge = () => {
  setUser(user => ({
    ...user,
    details: { ...user.details, age: user.details.age + 1 } 
    // Зима приближается, скоро день рождения Алисы! ❄️🎈
  }));
};

Эффективные стратегии обновления состояния

Пересмотрите вашу компонентную архитектуру

Необходимость частого обновления вложенных состояний зачастую говорит о неправильной структуре компонентов. Попробуйте упростить состояние или разбить его на более детализированные компоненты.

Подробнее об этом расскажет наш спикер на видео

Пользуйтесь простыми свойствами

По возможности передавайте простые свойства в дочерние компоненты. Это упростит структуру и чётко определит зависимости компонента.

Особенности обновления вложенных состояний

При работе со списками или массивами в объектах состояния требуется особое внимание, чтобы уберечься от неожиданных изменений. В таких случаях правильно используйте расширение или метод .map().

Визуализация

Представьте обновление вложенных свойств состояния в React как уход за садом из русских матрешек (🪆).

Сад (🪆): [БольшаяМатрёшка(🌺), СредняяМатрёшка(🌻), МаленькаяМатрёшка(🌼)]

Каждая Матрешка символизирует свойство состояния, а Цветок – его значение.

/** Обновляем Цветок СреднейМатрёшки **/
setState(prevState => ({
  ...prevState, 
  СредняяМатрёшка: {...prevState.СредняяМатрёшка, Цветок: 🌹}
}));

Мы аккуратно меняем цветок у Средней Матрёшки, затем возвращаем её на место. setState в React гарантирует, что остальные матрёшки остаются нетронутыми.

Исходное состояние: Сад (🪆): [🌺, 🌻, 🌼]
После обновления: Сад (🪆): [🌺, 🌹, 🌼]

Некоторые инструменты для облегчения разработки

Применяйте Object.assign для обновления вложенных состояний

Object.assign – это дополнительный способ обработки обновлений вложенного состояния:

this.setState(prevState => ({
  user: Object.assign({}, prevState.user, {
    details: Object.assign({}, prevState.user.details, { age: prevState.user.details.age + 1 })
  })
  // Object.assign приходит на помощь! 🦸‍♀️
}));

Новые объекты, которые создаёт Object.assign, гарантируют соблюдение принципа нерушимости состояния.

Последовательные обновления с использованием запятой

Для последовательного обновления состояния используйте оператор запятой в JavaScript:

this.setState(prevState => ({
  user: { ...prevState.user, name: 'Боб' },
  // Кто этот Боб? Алиса решила примерить новый образ! 💄
}), () => this.setState(prevState => ({
  user: { ...prevState.user, details: { ...prevState.user.details, age: 25 } }
  // Боб усердно занялся самосовершенствованием! 💪
})));

Избегайте ловушек в shouldComponentUpdate()

Стремитесь к упрощению shouldComponentUpdate(), особенно при работе с объемными вложенными состояниями, чтобы минимизировать проблемы с производительностью.

Полезные материалы

1. Использование хука состояния – React — Основы работы с состоянием в функциональных компонентах при помощи хуков.
2. Обработка событий – React — Поглубже познакомьтесь с тем, как обрабатывать события для взаимодействия со состоянием.
3. Введение в Immer | Immer — Освойте управление нерушимым состоянием для сложных структур.
4. reactjs – Почему нерушимость так важна (или нужна) в JavaScript? – Stack Overflow — Почему нерушимость так важна при управлении состоянием в React.
5. Руководство по React – Полное погружение в обучение React для новичков — Знакомимся с современными принципами работы с React, включая управление состоянием.
6. Понимание React setState | CSS-Tricks — Полное руководство по использованию метода setState в React и его возможности.
7. GitHub – reduxjs/redux: Предсказуемое управление состоянием для JavaScript-приложений — Альтернатива для управления состоянием в приложениях: Redux.