Библиотека React — одна из самых популярных библиотек для фронтенд-разработки. Он разработан командой Facebook, но широко используется во всем мире.
Как реакция стала такой популярной? Что ж, в React есть много привлекательных особенностей, но есть несколько качеств, которые выделяют React во всех фреймворках:
- Легкая библиотека вместо громоздкого фреймворка.
- Сосредоточены только на части просмотра, что делает React быстрым.
- Библиотека на основе компонентов, очень легко создавать независимые компоненты с помощью реакции.
- Использует только Javascript ES6, без дополнительных ключевых слов для изучения.
- У него очень органичный поток, как в базовом приложении Javascript, он не обязывает разработчиков писать в определенном потоке.
- Библиотека с открытым исходным кодом.
React — это библиотека, и она предоставляет разработчикам свободу действий. Но с большой мощью React разработчик может легко ошибиться и снизить производительность приложения.
8 распространенных ошибок, которые допускают разработчики, чтобы ответственно использовать возможности React.
- Не писать повторно используемый код.
- Не разбивать пользовательский интерфейс на мелкие компоненты.
- Состояние настройки в функции рендеринга.
- Непосредственное изменение состояния.
- Предполагая, что обновления состояния синхронны.
- Нет ключа в списках.
- Добавление слишком большого количества ненужных библиотек.
- Недостаточное количество компонентов без состояния.
1. Не писать повторно используемый код
Основой основанной на компонентах структуры является повторное использование существующего кода. Разработчики, которые плохо знакомы с фреймворками, основанными на компонентах, часто совершают эту ошибку. Разработчики не создают компоненты таким образом, чтобы их можно было повторно использовать во многих других компонентах, вместо этого они создают тесно связанные компоненты с родительским компонентом, и они не могут быть повторно использованы другими компонентами. В результате разработчику пришлось дублировать код.
Эта привычка в первую очередь противоречит цели использования фреймворка на основе компонентов (React, Angular, VueJs). React продвигает СУХОЕ: Не повторяйтесь. Разработчики должны создавать как можно больше общих и независимых компонентов.
2. Не разбивать UI на мелкие компоненты
Распространенная ошибка разработчиков React заключается в том, что они не создают достаточного количества компонентов. С помощью React вы можете создавать большие компоненты, выполняющие множество задач, но лучше, чтобы компоненты были небольшими, когда один компонент соответствует одной функции. Это не только экономит ваше время, но и помогает при отладке, поскольку вы знаете, какие компоненты связаны с возможными ошибками.
3. Настройка состояния в функции рендеринга
Разработчики, которые плохо реагируют и плохо знакомы с жизненным циклом реагирующего компонента, обычно делают ошибку, вызывая функцию setState внутри функции рендеринга для изменения состояния компонента. В React функция setState будет вызывать функцию рендеринга после обновления состояния.
Когда разработчик вызывает setState() в render(), происходит бесконечный цикл. Поскольку каждый раз, когда вызывается функция рендеринга, она вызывает setState, который в конечном итоге снова вызывает функцию рендеринга.
Состояние нельзя изменить в функции рендеринга в период реакции. Его следует изменить в любом другом методе жизненного цикла компонента. Если вам нужно изменить состояние только в рендере, значит, вы делаете что-то не так и вам нужно переосмыслить функциональность компонента.
4. Непосредственное изменение состояния
В React состояние должно быть неизменным. Если вы измените состояние напрямую, это вызовет проблемы с производительностью, которые трудно исправить.
Давайте посмотрим на пример:
Вы хотите обновить проверенный ключ объекта в массиве на основе состояния флажка, но у вас есть проблема. React не может наблюдать и инициировать повторный рендеринг, потому что объект изменяется с той же ссылкой.
Чтобы исправить это, вы можете использовать либо метод setState(), либо крючок useState(). Любой из этих методов гарантирует, что ваши изменения будут подтверждены React, и ваш DOM будет корректно перерисован.
Давайте перепишем предыдущий пример и воспользуемся методом useState().
5. Предполагая, что обновления состояния синхронны
Легко забыть, что состояние в React асинхронно. Об этом забывают даже самые опытные разработчики React.
Асинхронность означает, что любые внесенные вами изменения не вступают в силу немедленно (и могут вступить в силу при следующем рендеринге). Автоматически реагировать на вызовы пакетного обновления для повышения производительности. Если вы обращаетесь к значению состояния сразу после его установки, вы можете получить не самый точный результат.
Давайте посмотрим на пример:
Вы можете исправить это, указав необязательный второй параметр для setState(), который будет действовать как функция обратного вызова. Функция обратного вызова будет вызвана сразу после того, как вы обновите состояние своим изменением.
6. Нет key в списках
Допустим, вам нужно отобразить список элементов, и ваш код выглядит примерно так:
Если вы работаете с небольшим приложением, это может сработать. Но при работе с большими списками вы столкнетесь с проблемами рендеринга, когда захотите изменить или удалить элемент из списка.
React отслеживает все элементы списка в объектной модели документа (DOM). Без этой записи React не узнает, что изменилось в вашем списке.
Чтобы это исправить, необходимо добавить ключи ко всем элементам списка. Ключи придают каждому элементу уникальный идентификатор, который помогает React определить, какие элементы были добавлены, удалены, изменены и т. д.
Вот как это сделать:
7. Добавление слишком большого количества ненужных библиотек
React — это легкая библиотека, потому что она фокусируется только на части представления приложения. Но в отличие от любого полноценного фреймворка, в который встроены все остальные библиотеки, чтобы облегчить задачу разработчикам, здесь, в React, разработчик должен сам загружать библиотеки в проект.
Разработчик может легко перегрузить свое приложение, добавив слишком много сторонних библиотек, которые на самом деле не требуются для разработки приложения. Один из распространенных примеров использования Redux в приложении, где он на самом деле не требуется.
8. Недостаточное количество компонентов без состояния
React имеет два типа компонентов: компоненты с полным состоянием и компоненты без состояния. Компоненты с полным состоянием указывают в них, с другой стороны, компоненты без состояния не имеют в них состояния. Другими словами, компоненты без состояния имеют только часть представления. Эти компоненты не могут изменять состояние или данные. Он просто используется как чистая функция, которая принимает реквизиты и показывает их в DOM практически без изменений в представлении данных.
Рекомендуется как можно больше использовать компоненты без состояния, чтобы снизить риск получения ошибок и облегчить отладку нашего кода, отделив компоненты, манипулирующие состоянием, от компонентов, не относящихся к простому типу просмотра.
