Крючки

  • 1 минута

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

Крючок эффекта

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

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

Когда следует использовать крючок эффекта

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

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

useEffect

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

useEffect(() => {
    // code goes here
});

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

useEffect(() => {
    // code goes here
}, [ someStatefulObject ]);