Хуки React — это функция, представленная в React 16.8, которая позволяет вам использовать состояние и другие функции React в функциональных компонентах. Вот несколько примеров хуков React:
useState: хук useState позволяет добавлять состояние к функциональным компонентам. Вот пример:
import React, { useState } from 'react'; function Counter() { const [count, setCount] = useState(0); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}>Click me</button> </div> ); }
В приведенном выше коде мы используем хук useState
для объявления переменной состояния с именем count
и функции для ее обновления с именем setCount
. Мы начинаем счет с 0 и отображаем его на экране. Когда пользователь нажимает кнопку, мы обновляем счетчик, используя setCount
.
useEffect. Хук useEffect позволяет выполнять побочные эффекты в функциональных компонентах, такие как выборка данных или обновление модели DOM. Вот пример:
import React, { useState, useEffect } from 'react'; function Counter() { const [count, setCount] = useState(0); useEffect(() => { document.title = `You clicked ${count} times`; }); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}>Click me</button> </div> ); }
В приведенном выше коде мы используем хук useEffect
для обновления заголовка документа при каждом изменении счетчика. Мы передаем анонимную функцию в useEffect
, которая устанавливает текущий счетчик в заголовке документа. Поскольку мы не указываем никаких зависимостей, этот эффект работает при каждом рендеринге.
useContext: хук useContext позволяет вам получить доступ к объекту контекста в функциональных компонентах. Вот пример:
import React, { useContext } from 'react'; import MyContext from './MyContext'; function MyComponent() { const myValue = useContext(MyContext); return ( <div> <p>My value is: {myValue}</p> </div> ); }
В приведенном выше коде мы используем хук useContext
для доступа к значению объекта контекста с именем MyContext
. Затем мы отображаем значение на экране. Этот компонент должен быть потомком компонента MyContext.Provider
, чтобы контекст был доступен.