3 важные темы, которые должен понимать каждый разработчик React

Для новичка React может показаться минным полем, заполненным странным поведением, сверхъестественным взаимодействием между хуками и тем, что использовать — классы или хуки. Я надеюсь, что эта небольшая статья поможет вам в вашем путешествии по фронтенду, поскольку я объясню некоторые простые, но эффективные современные методы React.

1. Компоненты класса или функции (хуки)

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

Давайте напишем простой компонент, который генерирует разные случайные значения каждый раз, когда мы нажимаем кнопку, и обновляет интерфейс новым значением.

Сначала, используя компонент класса, мы получим что-то вроде этого:

Тогда как с хуками наш компонент будет выглядеть так:

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

Крючки:
 — меньше по размеру (строк) и более подробны
 — их легче понять тем, у кого нет знаний в области объектно-ориентированного программирования
 – они менее сложны, поскольку не используют методы жизненного цикла, такие как componentDidMount. , componentDidUnmount и многие другие

Доступно много хуков, но я расскажу о двух, которые считаю наиболее важными для понимания.
- useState
- useEffect

2. Как работает useState

useState — один из самых важных хуков, который предоставляет состояние нашим компонентам. Состояние — это то, что делает компонент интерактивным и динамичным, но оно также может снизить производительность в случае частых обновлений состояния, если оно не используется должным образом.

Он получает в качестве аргумента начальное значение для состояния и возвращает массив переменной текущего состояния и функции установки для изменения (обновления) состояния.

В нашем примере ранее мы видели, как хук useState работает для числовой переменной, но как насчет объекта или массива?

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

Это то же самое, что и в нашем предыдущем примере, но с объектом вместо числа.

Допустим, у нас есть массив пользователей, которым понравился пост. Как нам добавить нового пользователя в массив?

Не так уж сложно обновить состояние в конце концов, не так ли 🤓?

3. Как работает useEffect

useEffect — это еще один важный хук, который позволяет нам добавить функцию обратного вызова для прослушивания изменений в определенной переменной.

Он предоставляет 2 аргумента
- функция обратного вызова для выполнения при изменении зависимости
- массив зависимостей

Массив зависимостей звучит довольно странно и опасно, и это действительно так, если вы забудете о нем. Отсутствие аргумента `[]` в useEffect приведет к тому, что он будет срабатывать при каждом повторном рендеринге, что может привести к очень нежелательным ситуациям (таким как «ddos-атака» вашего собственного API и потеря кредита).

Допустим, мы хотим сделать так, чтобы вызов API возвращал случайное имя животного всякий раз, когда компонент впервые появляется (монтируется) на экране.

Мы можем написать что-то вроде этого

Другим вариантом использования было бы, если бы мы хотели сделать запрос на выборку только при открытии модального окна.

В React есть много других хуков и техник, но это для другого дня, так как это и так нежелательно длинный и сложный пост.

Надеюсь, вам понравилось это руководство, и я был бы рад, если бы вы поставили ему 💜!