Хуки React — это набор функций, представленных в React 16.8, которые позволяют разработчикам добавлять функции состояния и жизненного цикла к функциональным компонентам. Два наиболее часто используемых хука — это useState
и useEffect
.
- useState: благодаря хуку
useState
функциональные компоненты теперь могут сохранять и обновлять свое собственное состояние. Например,useState
— это хук, который позволяет добавлять состояние React к функциональным компонентам.
const [exampleData, setExampleData] = useState([]);
2. useEffect:Хук useEffect
заменяет такие методы жизненного цикла, как componentDidMount
, componentDidUpdate
и componentWillUnmount
. Он позволяет вам выполнять побочные эффекты, такие как выборка данных, манипулирование DOM или подписки, чистым и организованным способом. Получение данных, настройка подписки и ручное изменение DOM в компонентах React — все это примеры побочных эффектов.
Вот как это работает:
import React, { useEffect } from 'react'; function ExampleComponent() { useEffect(() => { console.log('This will run once when the component is mounted.'); }, []); // Empty dependency array return <div>Example Component</div>; } export default ExampleComponent;
3. Пользовательский перехват. Это фрагменты логики многократного использования, которые можно использовать в разных компонентах. Мы углубимся в создание специального хука, который упрощает получение данных и управление состоянием. Давайте рассмотрим процесс:
3.1 Начните с определения функции useCustomHook
3.2 Внутри пользовательской функции-перехватчика вы должны инициализировать состояния, которые будет обрабатывать ваш перехватчик.
3.3 Добавьте перехватчик useEffect
для управления процесс получения данных. Внутри эффекта установите состояние загрузки на true
, чтобы указать, что данные извлекаются.
3.4 Вызовите метод обещания внутри `useEffect`.
- Если обещание выполнено успешно (
then
), обновите состояниеexampleData
полученными данными и установите дляloading
значениеfalse
, чтобы указать, что выборка данных завершена. - Если обещание отклонено (
catch
), обновите состояниеerror
, чтобы получить информацию об ошибке.
4. Последний шаг с примером кода:
Ваш собственный хук должен возвращать объект, включающий инициализированные вами состояния. Этот объект может использоваться компонентами, которые используют ваш собственный крючок для доступа к извлеченным данным, состоянию загрузки и информации об ошибках.
import { useEffect, useState } from "react"; export const useCustomHook = () => { const [exampleData, setExampleData] = useState([]); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { setLoading(true); getAllQuestions() .then((responseData) => { setExampleData(responseData); setLoading(false); }) .catch((err) => { setError(err); }); }, []); return { exampleData, loading, error }; };