Rivalry2

HTML Diff

2 added 2 removed

Original 2026-01-01

Modified 2026-02-26

1 <p>Неизменяемость состояния - одна из ключевых тем в React. Её легко придерживаться, работая с примитивными типами данных, но с составными, такими как объекты и массивы, у неподготовленного пользователя могут возникнуть сложности. В этом уроке рассматриваются основные способы частичного обновления объектов и массивов.</p>

2 <p>Кроме примеров на чистом JS, будут продемонстрированы примеры с использованием библиотеки<a>immutability-helper</a>, которая создана для облегчения выполнения подобных операций. Она особенно актуальна при выполнении обновлений там, где код на JS получается слишком сложным.</p>

3 <h2>Массивы</h2>

4 <h3>Массив: добавление</h3>

5 <p>Самое простое - это добавление в массив:</p>

6 <p>Если необходимо добавить элемент в начало, то нужно всего лишь поменять местами элементы массива:</p>

7 <h4>Использование immutability-helper</h4>

8 <h3>Массив: удаление</h3>

9 - <p>Более интересный пример. Чтобы успешно выполнить удаление, нужно знать, что удалять. Это значит, что каждый элемент в коллекции должен иметь идентификатор. Для удаления используется старая добрая фильтра��ия.</p>

9 + <p>Более интересный пример. Чтобы успешно выполнить удаление, нужно знать, что удалять. Это значит, что каждый элемент в коллекции должен иметь идентификатор. Для удаления используется старая добрая фильтрация.</p>

10 <p>Может возникнуть вопрос: откуда взялся идентификатор внутри обработчика? И здесь нам на помощь приходят замыкания.</p>

11 - <p><a>https://codepen.io/hexlet/pen/JygbWP</a></p>

11 + <p><a>Попрактиковаться</a></p>

12 <p>Обратите внимание на способ задания обработчика: removeItem = (id) => (e) => { и его использование onClick={this.removeItem(id)}.</p>

13 <h4>Использование immutability-helper</h4>

14 <p>Удаление на чистом JS через фильтр - самый оптимальный способ. С использованием immutability-helper получается сложно.</p>

15 <h3>Массив: изменение</h3>

16 <p>К сожалению, без дополнительных инструментов код решения будет слишком громоздким. Он приведён для ознакомления, но в реальном коде так делать не надо.</p>

17 <p>Думаю, не придётся вас убеждать в том, что это перебор :)</p>

18 <h4>Использование immutability-helper</h4>

19 <p>Как видно, этот способ значительно проще и чище. Рекомендуется к использованию.</p>

20 <h2>Объекты</h2>

21 <h3>Объект: добавление</h3>

22 <p>Так же просто, как и с массивом.</p>

23 <p>Либо, если ключ вычисляется динамически, нужно делать так:</p>

24 <h3>Объект: удаление</h3>

25 <p>На помощь приходит деструктуризация:</p>

26 <h4>Использование immutability-helper</h4>

27 <h3>Объект: изменение</h3>

28 <p>Абсолютно то же самое, что и добавление.</p>

29 <h4>Использование immutability-helper</h4>

30 <h2>Глубокая вложенность</h2>

31 <p>В примерах выше в основном можно обходиться стандартными средствами JS, и только в некоторых ситуациях удобнее пользоваться сторонними решениями. В реальном коде всё будет также, особенно если учитывать рекомендацию React и держать состояние максимально плоским. Но в некоторых ситуациях данные, которые нужно изменить, находятся не на поверхности, а в глубине структур. К сожалению, в этих ситуациях обычный JS-код будет раздуваться. И тут уже точно не обойтись без дополнительных библиотек.</p>

32 <p><a>https://repl.it/@hexlet/js-react-immutability-helper</a></p>

33 <h2>Аналоги</h2>

34 <p>immutability-helper - не единственная библиотека для подобных задач. Вот еще несколько популярных:</p>

35 <ul><li><a>immutable-js</a>- основана на персистентных данных</li>

36 <li><a>updeep</a>- активно использует каррирование</li>

37 <li><a>immerjs</a>- пожалуй, самая популярная библиотека в JS для работы с неизменяемыми данными</li>

38 </ul>