Представьте, что вы менеджер отеля, который хочет, чтобы ваши гости чувствовали себя комфортно. Вы начинаете с того, что обустраиваете комнаты и следите за тем, чтобы все было чисто и организовано. Однако по мере того, как гости прибывают и регистрируются, их потребности и предпочтения могут измениться. Некоторые гости могут запросить дополнительные полотенца или подушки, а другие могут попросить порекомендовать местные рестораны или достопримечательности.
здесь вашим компонентом является отель, а крючок useEffect
подобен команде горничных и другого персонала, который работает за кулисами, чтобы обеспечить удовлетворение потребностей каждого гостя. Когда вы используете хук useEffect
, вы говорите React отслеживать определенные условия и выполнять определенные действия при изменении этих условий.
Например, вы можете использовать хук useEffect
для получения новых данных из API, когда пользователь взаимодействует с компонентом, или для обновления состояния компонента на основе изменений в URL-адресе браузера.
Подобно тому, как персонал отеля работает над тем, чтобы номер каждого гостя был чистым и комфортным, а также предоставлял персонализированные рекомендации и услуги, хук useEffect
помогает вашему компоненту реагировать на изменения в окружающей среде и выполнять действия, не связанные напрямую с рендерингом.
Используя хук useEffect
, вы можете быть уверены, что ваш компонент постоянно обновляется и обеспечивает наилучшие возможности для пользователя, точно так же, как отель, который делает все возможное, чтобы удовлетворить своих гостей.
Давайте начнем с простого примера, который показывает, как использовать хук useEffect
в компоненте.
Предположим, у нас есть компонент с именем Counter
, отображающий счетчик, который увеличивается на 1 каждую секунду. Вот как мы можем использовать useEffect
для обновления счетчика каждую секунду:
import React, { useState, useEffect } from 'react'; function Counter() { const [count, setCount] = useState(0); useEffect(() => { const interval = setInterval(() => { setCount(count => count + 1); }, 1000); return () => clearInterval(interval); }, []); return <div>{count}</div>; } export default Counter;
Вот разбивка того, что происходит в этом коде:
- Мы импортируем хуки
useState
иuseEffect
из пакетаreact
. - Мы определяем компонент
Counter
, который использует хукuseState
для создания переменной состоянияcount
, начинающейся с 0, и функциюsetCount
для обновления счетчика. - Мы используем хук
useEffect
для настройки таймера, который обновляет счетчик каждую секунду. ХукuseEffect
принимает два аргумента: функцию, устанавливающую таймер, и массив зависимостей, указывающий, когда эффект должен быть перезапущен. - Функция, устанавливающая таймер, создает новый интервал, обновляющий счетчик на 1 каждую секунду с помощью функции
setCount
. ФункцияsetCount
вызывается с функцией, которая принимает предыдущий счетчик в качестве аргумента и возвращает новый счетчик, чтобы гарантировать, что мы всегда работаем с последним счетчиком. - Хук
useEffect
возвращает функцию очистки, которая очищает интервал, когда компонент размонтирован, чтобы предотвратить утечку памяти. - Мы визуализируем текущий счетчик в элементе
div
.
когда использовать хуки useState
и useEffect
, вот несколько общих рекомендаций:
- Используйте хук
useState
, когда вам нужно управлять состоянием вашего компонента, например пользовательским вводом или данными приложения. - Используйте хук
useEffect
, когда вам нужно управлять побочными эффектами в вашем компоненте, такими как выборка данных из API, обновление заголовка документа или настройка таймеров. - Используйте оба хука вместе, когда вам нужно синхронизировать состояние и побочные эффекты в вашем компоненте.
Хук useEffect
был введен в React, чтобы упростить управление побочными эффектами в функциональных компонентах. До хука useEffect
вам приходилось использовать компоненты класса и методы жизненного цикла для управления побочными эффектами, которые могли быть более многословными и трудными для понимания. Хук useEffect
предоставляет простой и интуитивно понятный способ управления побочными эффектами в функциональных компонентах, что сделало разработку React более доступной и приятной для разработчиков.
Получение данных из API:
В этом примере мы будем получать данные из API с помощью хука useEffect
и обновлять состояние с помощью полученных данных. Мы создадим компонент PostList
, который отображает список сообщений.
// PostList.js import React, { useState, useEffect } from "react"; function PostList() { const [posts, setPosts] = useState([]); useEffect(() => { fetch("https://jsonplaceholder.typicode.com/posts") .then((response) => response.json()) .then((data) => setPosts(data)); }, []); return ( <div> <h1>Posts</h1> <ul> {posts.map((post) => ( <li key={post.id}>{post.title}</li> ))} </ul> </div> ); } export default PostList;
Импортируйте useEffect
и useState
из библиотеки React:
import React, { useEffect, useState } from 'react';
Создайте функциональный компонент:
function MyComponent() { // code goes here }
Инициализируйте переменную состояния для хранения данных, которые мы будем получать из API:
function MyComponent() { const [data, setData] = useState([]); }
Используйте хук useEffect
для получения данных из API:
function MyComponent() { const [data, setData] = useState([]); useEffect(() => { fetch('https://api.example.com/data') .then(response => response.json()) .then(data => setData(data)); }, []); // rest of the code goes here }
Здесь мы используем хук useEffect
для получения данных из API. Первый аргумент useEffect
— это функция, которая будет вызываться после рендеринга компонента. Внутри этой функции мы используем метод fetch
для выполнения запроса GET к конечной точке API. Когда ответ получен, мы конвертируем его в JSON с помощью метода json
, а затем обновляем переменную состояния data
с помощью функции setData
. Второй аргумент useEffect
— это пустой массив, что означает, что этот эффект сработает только один раз, после монтирования компонента.
function MyComponent() { const [data, setData] = useState([]); useEffect(() => { fetch('https://api.example.com/data') .then(response => response.json()) .then(data => setData(data)); }, []); return ( <div> {data.map(item => ( <div key={item.id}> <h2>{item.title}</h2> <p>{item.description}</p> </div> ))} </div> ); }
- Здесь мы визуализируем полученные данные с помощью метода
map
. Мы предполагаем, что API возвращает массив объектов, где каждый объект имеет свойстваid
,title
иdescription
.
2. Все! Это базовый пример того, как получать данные из API с помощью хука useEffect
в функциональном компоненте. Конечно, здесь есть много вариаций и сложностей, в зависимости от используемого вами API и конкретного варианта использования.
Настройка подписки с помощью useEffect:
В этом примере мы будем использовать хук useEffect
для настройки подписки на источник данных в реальном времени. Мы создадим компонент Clock
, который отображает текущее время.
// Clock.js import React, { useState, useEffect } from "react"; function Clock() { const [time, setTime] = useState(new Date()); useEffect(() => { const timer = setInterval(() => setTime(new Date()), 1000); return () => clearInterval(timer); }, []); return ( <div> <h1>Current time: {time.toLocaleTimeString()}</h1> </div> ); } export default Clock;
- Создайте новый файл с именем
Clock.js
и импортируйтеReact
,useState
иuseEffect
.
2. Создайте функциональный компонент с именем Clock
и объявите переменную состояния с именем time
с useState
. Инициализируйте time
текущей датой, используя конструктор Date()
.
3. Используйте хук useEffect
для настройки подписки, которая обновляет переменную состояния time
каждую секунду. Внутри функции обратного вызова useEffect
вызовите setInterval
с функцией обратного вызова, которая обновляет time
с использованием setTime
и интервалом 1000 мс (1 секунда).
4. Возвратите JSX, который отображает текущее время, используя метод toLocaleTimeString
для переменной состояния time
.
5. Экспортируйте компонент Clock
с помощью export default
6. В файле App.js
импортируйте компонент Clock
и визуализируйте его.
7. вот и все! Теперь, когда вы запускаете приложение React, компонент Clock
будет отображать текущее время и обновляться каждую секунду.