​Атрибут key в списках

Три правила для правильной установки ключа:

👉 ключ должен быть уникальным В ПРЕДЕЛАХ МАССИВА ЭЛЕМЕНТОВ
👉 не следует использовать в качестве ключа порядковый индекс элемента в массиве
👉 ключ должен находиться именно на том элементе, который возвращается из массива, а не на его потомках

#важно #jsx #ключи #документация

Зачем в списках нужны ключи?

При выводе массива элементов в JSX React просит указать key для каждого элемента. Другими словами, для каждого элемента нужно указать УНИКАЛЬНЫЙ (в пределах массива) идентификатор. React хочет иметь возможность различать эти элементы, зачем это ему?

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

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

Статья (рус): Использование индекса в качестве ключа — это анти-паттерн

#подкапотом #jsx #ключи #ссылки

Зачем нужны ключи. Пример с неконтролируемыми элементами

Если вы используете неконтролируемые элементы (https://xn--r1a.website/react_junior/43), React не может полностью отвечать за их состояние. Чтобы избежать проблем, очень важно соблюдать правила, на которые полагается библиотека. Например, не использовать индексы массива в качестве ключей для элементов.

Пример из документации: https://ru.reactjs.org/redirect-to-codepen/reconciliation/index-used-as-key

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

индекс 0 - элемент с id: 1, значение 1
индекс 1 - элемент с id: 2, значение 2

Но если добавить новый элемент в начало списка, то все индексы пересчитаются.

индекс 0 - элемент с id: 3
индекс 1 - элемент с id: 1, значение 1
индекс 2 - элемент с id: 2, значение 2

Но интерфейс сломался, инпут первого элемента (индекс 0) по-прежнему отображает 1.

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

#ошибки #jsx #подкапотом #документация #ключи

Список тегов для более удобного поиска постов

👉 Основные понятия

#компоненты
#jsx
#жизненныйциклкомпонента
#виртуальныйdom
#состояние
#обработкасобытий
#потокданных
#ключи
#формы
#рефы
#hoc
#рендерпропсы
#контекст
#порталы
#хуки
#concurrentmode

👉 Управление состоянием

#управлениесостоянием
#redux
#mobx
#recoil

👉 Работа с ошибками

#обработкаошибок
#предохранители
#отладка
#проверкатипов
#typescript
#строгийрежим

👉 Оптимизация

#оптимизация
#profiler
#ленивыекомпоненты
#purecomponent

👉 Тестирование

#тестирование
#jest
#testinglibrary

👉 Серверный рендеринг

#серверныйрендеринг

👉 Стилизация

#стили
#styledcomponents
#jss
#radium
#shadowdom

👉 Распространенные задачи

#валидацияформ
#роутинг
#обменданными
#rtkquery

👉 Прочее

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

10 вопросов по React начального уровня с интервью

Статья (англ.): https://javascript.plainenglish.io/10-entry-level-react-interview-questions-5a8ea74e2130

Проверим себя.

1. Что такое Virtual DOM и как он работает?

👉 Ответ

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

2. Назовите самые важные методы жизненного цикла (классовых компонентов) и зачем их использовать. А также альтернативные хуки (React Hooks)

👉 Ответ

При монтировании компонента работают:
- constructor,
- static getDerivedStateFromProps (useEffect с массивом зависимостей),
- render,
- componentDidMount (useEffect)

При перерендере:
- static getDerivedStateFromProps (useEffect с массивом зависимостей)
- shouldComponentUpdate (useMemo)
- render
- getSnapshotBeforeUpdate (кастомные хуки для сохранения предыдущего состояния)
- componentDidUpdate (useEffect)

При размонтировании:
- componentWillUnmount (useEffect с возвращением функции для сброса эффекта)

3. Зачем мы используем стрелочные функции в React?

👉 Ответ

Чтобы не создавать новый контекст выполнения (this), а выполнять все действия в контексте компонента. Если не использовать стрелочные функции, придется привязывать все методы к экземпляру компонента (в конструкторе).

4. Что такое ключи (keys) и зачем они нужны?

👉 Ответ

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

5. В чем преимущества React перед настоящими "фреймворками" типа Angular?

Вопрос очень спорный, но пусть будет.

👉 Ответ

React легкий, использует JSX (проще освоиться) и виртуальный DOM (быстрее работает). Поток данных идет в одном направлении сверху вниз (проще отлаживать). Супер развитая экосистема, куча инструментов для любых задач.

Остальные вопросы уже по JavaScript, можно посмотреть в статье, чтобы освежить знания.

#компоненты #жизненныйциклкомпонента #хуки #виртуальныйdom #обработкасобытий #ключи #ссылки

Новые теги

#rtkquery
#обменданными

Полный список тегов: https://xn--r1a.website/react_junior/84

По TypeScript получилось довольно много материала (и еще будет 😄), поэтому добавлены новые теги для сложных тем: #infer, #дженерики и #tsдекораторы
Все теги тут: https://xn--r1a.website/react_junior/84