Добавление элементов в массив состояния в React.js: push vs copy

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

Для корректной модификации массивов в состоянии React.js, воспользуйтесь принципом немутабельности. Старые методы оставьте в прошлом и начните использовать оператор распространения для добавления элементов:

this.setState(prevState => ({ array: [...prevState.array, newItem] }));
// "Добро пожаловать, новичок."

Упростите процесс обновления с помощью .map():

this.setState(prevState => ({ array: prevState.array.map((item, index) => index === itemIndex ? updatedItem : item) }));
// "Изменения — вот что двигает нас вперед."

Для удаления элементов воспользуйтесь .filter():

this.setState(prevState => ({ array: prevState.array.filter((item, index) => index !== itemIndex) }));
// "Иногда лучше избавиться от лишнего."

Эти методы гарантируют вам получение нового массива и оптимальное обновление состояния в React.

Немутабельность — ключ к гармоничному состоянию

В React состояние превалирует над всем. Любые прямые попытки его изменить могут привести к ошибкам при определении и отрисовке компонентов. Создайте новый массив, не прибегая к изменению исходного, чтобы избежать проблем и гарантировать гармонию состояния. Это достигается благодаря немутирующим методам, таким как .concat(), или же с применением оператора распространения, классическим инструментом ES6.

Борьба со состоянияем гонки с помощью функций-обновителей

Подобно обеспечению стабильности в шаткой ситуации, в React можно вернуть контроль над состояниями при помощи такого инструмента как функции-обновители. Аналогично тому, как масло помогает сделать движение более плавным и избежать сбоев, функции-обновители, приняв предыдущее состояние, обеспечивают актуальность вашего состояния даже при асинхронных обновлениях.

Миф о памяти — производительность копирования массива

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

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

Воспринимайте состояние вашего приложения React как набор инструментов 🧰. Ваш массив — это набор гаечных ключей 🔧:

Исходное состояние ящика: [🔧, 🔧, 🔧]

🔨 Добавляем еще один гаечный ключ, не внося изменений в исходное состояние:

setState(toolbox => [...toolbox, 🔧]);

Теперь вы видите обновленное состояние ящика:

Обновленное состояние ящика: [🔧, 🔧, 🔧, 🔧]
// "Новые поступления всегда рады."

🔧 Обновим существующий ключ на новую модель:

setState(toolbox => toolbox.map(tool => tool === 🔧 ? 🛠 : tool));

В результате, перед вами обновленный набор инструментов:

Обновленное состояние ящика: [🛠, 🔧, 🔧, 🔧]
// "Непостоянство — единственное постоянство."

4 столпа эффективного управления состоянием массива

Остерегайтесь ловушек

Изменение массива состояния в React может сравниться с игрой на минном поле. Методы типа .sort() и .reverse() мутируют массив, что может подвергнуть ваше приложение риску. Используйте эти методы только с копией массива, для создания которой можно использовать оператор spread или метод .slice().

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

Будьте готовы к асинхронности

Управление состояниями порой напоминает сложную головоломку. Тем не менее, используя prevState в функциях-обновителях, вы упрощаете процесс обновления и справляетесь с асинхронными операциями.

Используйте возможности ES6

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

Не бойтесь просить помощи

Если вы столкнулись с высокой сложностью состояний в вашем приложении, не стесняйтесь поискать помощи. Библиотеки, такие как Immutable.js, и утилиты Lodash, облегчат вам работу, сохранив неприкосновенность состояний.

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

1. React.Component – React — руководство по использованию setState в классовых компонентах.
2. Immutability Helpers – React — руководство по немутабельным паттернам обновления для эффективного управления состоянием.
3. Spread syntax (...) – JavaScript | MDN — применение спред-синтаксиса для обновления массивов состояния.
4. Tutorial: Tic-Tac-Toe – React — о значимости немутабельности в приложениях на React.
5. Immutable Update Patterns | Redux — применение немутабельности для повышения контроля над состоянием.
6. Writing Resilient Components — overreacted — советы для избежания проблем при работе со состоянием от Дэна Абрамова.