3 важные темы, которые должен понимать каждый разработчик React
Для новичка React может показаться минным полем, заполненным странным поведением, сверхъестественным взаимодействием между хуками и тем, что использовать — классы или хуки. Я надеюсь, что эта небольшая статья поможет вам в вашем путешествии по фронтенду, поскольку я объясню некоторые простые, но эффективные современные методы React.
1. Компоненты класса или функции (хуки)
В 99% случаев лучше, легче и проще использовать хуки, хотя классы предоставляют некоторые полезные функции. В проекте могут быть определены как классовые, так и функциональные компоненты, поэтому при необходимости их можно смешивать и сопоставлять.
Давайте напишем простой компонент, который генерирует разные случайные значения каждый раз, когда мы нажимаем кнопку, и обновляет интерфейс новым значением.
Сначала, используя компонент класса, мы получим что-то вроде этого:
Тогда как с хуками наш компонент будет выглядеть так:
В конце концов, вам решать, какой вариант вы выберете, хотя в настоящее время крючки довольно широко признаны во всем мире.
Крючки:
— меньше по размеру (строк) и более подробны
— их легче понять тем, у кого нет знаний в области объектно-ориентированного программирования
– они менее сложны, поскольку не используют методы жизненного цикла, такие как componentDidMount. , componentDidUnmount и многие другие
Доступно много хуков, но я расскажу о двух, которые считаю наиболее важными для понимания.
- useState
- useEffect
2. Как работает useState
useState — один из самых важных хуков, который предоставляет состояние нашим компонентам. Состояние — это то, что делает компонент интерактивным и динамичным, но оно также может снизить производительность в случае частых обновлений состояния, если оно не используется должным образом.
Он получает в качестве аргумента начальное значение для состояния и возвращает массив переменной текущего состояния и функции установки для изменения (обновления) состояния.
В нашем примере ранее мы видели, как хук useState работает для числовой переменной, но как насчет объекта или массива?
Давайте представим, что у нас есть форма для входа, и нам нужно хранить некоторую общедоступную информацию, касающуюся сведений о пользователе, такую как адрес электронной почты или имя.
Это то же самое, что и в нашем предыдущем примере, но с объектом вместо числа.
Допустим, у нас есть массив пользователей, которым понравился пост. Как нам добавить нового пользователя в массив?
Не так уж сложно обновить состояние в конце концов, не так ли 🤓?
3. Как работает useEffect
useEffect — это еще один важный хук, который позволяет нам добавить функцию обратного вызова для прослушивания изменений в определенной переменной.
Он предоставляет 2 аргумента
- функция обратного вызова для выполнения при изменении зависимости
- массив зависимостей
Массив зависимостей звучит довольно странно и опасно, и это действительно так, если вы забудете о нем. Отсутствие аргумента `[]` в useEffect приведет к тому, что он будет срабатывать при каждом повторном рендеринге, что может привести к очень нежелательным ситуациям (таким как «ddos-атака» вашего собственного API и потеря кредита).
Допустим, мы хотим сделать так, чтобы вызов API возвращал случайное имя животного всякий раз, когда компонент впервые появляется (монтируется) на экране.
Мы можем написать что-то вроде этого
Другим вариантом использования было бы, если бы мы хотели сделать запрос на выборку только при открытии модального окна.
В React есть много других хуков и техник, но это для другого дня, так как это и так нежелательно длинный и сложный пост.
Надеюсь, вам понравилось это руководство, и я был бы рад, если бы вы поставили ему 💜!