В React термин “хук” (hook) обычно относится к функциональным компонентам и представляет собой специальные функции, предоставляемые React, для того чтобы использовать состояние (state) и другие возможности React внутри функциональных компонентов.
Наиболее распространенные хуки в React включают:
- useState: Позволяет добавлять локальное состояние в функциональный компонент.
import React, { useState } from 'react'; function ExampleComponent() { const [count, setCount] = useState(0); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> ); } - useEffect: Позволяет выполнять побочные эффекты в функциональном компоненте, например, после каждого рендера или при монтировании/размонтировании компонента.
import React, { useState, useEffect } from 'react'; function ExampleComponent() { const [data, setData] = useState(null); useEffect(() => { // Здесь может быть код для выполнения побочных эффектов // например, запрос к серверу fetchData().then(result => setData(result)); }, []); // Пустой массив зависимостей означает, что эффект выполняется только один раз при монтировании return ( <div> {data && <p>Data: {data}</p>} </div> ); } - useContext: Позволяет использовать значение из контекста React внутри функционального компонента.
import React, { useContext } from 'react'; import MyContext from './MyContext'; function ExampleComponent() { const contextValue = useContext(MyContext); return ( <p>Context value: {contextValue}</p> ); }
Хуки в React предоставляют более удобный способ управления состоянием и жизненным циклом компонентов в функциональных компонентах, что делает код более чистым и понятным.