Хуки — это ключевая функциональность React, позволяющая использовать состояние и другие возможности React в функциональных компонентах. В этой статье рассмотрим основные хуки: useState, useEffect, useMemo, useCallback, useRef, useContext, useReducer, и useLayoutEffect.
1. useState
Что такое `useState`?
`useState` позволяет добавлять состояние в функциональные компоненты. Оно возвращает массив из двух значений: 1. Текущего значения состояния. 2. Функции для его обновления.Синтаксис
```javascript const [state, setState] = useState(initialState); ```Пример использования
```javascript import React, { useState } from 'react';function Counter() { const [count, setCount] = useState(0);
const increment = () => setCount(count + 1);
return (
Count: {count}
---
<h2 id="2-useeffect">2. useEffect</h2>
<h3 id="что-такое-useeffect">Что такое `useEffect`?</h3>
`useEffect` позволяет выполнять побочные эффекты в функциональных компонентах, такие как:
- Запросы к API.
- Подписки на события.
- Работа с DOM.
<h3 id="синтаксис">Синтаксис</h3>
```javascript
useEffect(effectFunction, dependencies);
Пример использования
Без зависимостей
Эффект вызывается после каждого рендера: ```javascript useEffect(() => { console.log('Component rendered'); }); ```С зависимостями
Эффект вызывается только при изменении указанных зависимостей: ```javascript useEffect(() => { console.log('Count changed:', count); }, [count]); ```3. useMemo
Зачем нужна мемоизация?
Мемоизация предотвращает ненужные вычисления или повторный рендеринг компонентов, улучшая производительность.Синтаксис
```javascript const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]); ```Пример
```javascript import React, { useState, useMemo } from 'react';function ExpensiveCalculation({ num }) { const calculate = (n) => { console.log('Calculating...'); return n * 2; };
const result = useMemo(() => calculate(num), [num]);
return
Result: {result}
; }
---
<h2 id="4-usecallback">4. useCallback</h2>
<h3 id="что-такое-usecallback">Что такое `useCallback`?</h3>
`useCallback` мемоизирует функции, чтобы они не создавались заново при каждом рендере.
<h3 id="синтаксис">Синтаксис</h3>
```javascript
const memoizedCallback = useCallback(() => doSomething(a, b), [a, b]);
Пример
```javascript import React, { useState, useCallback } from 'react';function Button({ onClick }) { console.log('Button rendered'); return ; }
function App() { const [count, setCount] = useState(0);
const increment = useCallback(() => { setCount(prevCount => prevCount + 1); }, []);
return (
Count: {count}
---
<h2 id="5-useref">5. useRef</h2>
<h3 id="что-такое-useref">Что такое `useRef`?</h3>
`useRef` создаёт объект, который сохраняет своё значение между рендерами.
<h3 id="пример">Пример</h3>
```javascript
import React, { useRef } from 'react';
function TextInput() {
const inputRef = useRef(null);
const focusInput = () => {
inputRef.current.focus();
};
return (
<div>
<input ref={inputRef} type="text" />
<button onClick={focusInput}>Focus Input</button>
</div>
);
}
6. useContext
Что такое `useContext`?
`useContext` позволяет получать данные из контекста без использования `Context.Consumer`.Пример
```javascript import React, { useContext } from 'react';const ThemeContext = React.createContext('light');
function ThemedButton() { const theme = useContext(ThemeContext); return ; }
---
<h2 id="7-usereducer">7. useReducer</h2>
<h3 id="что-такое-usereducer">Что такое `useReducer`?</h3>
`useReducer` управляет сложным состоянием с помощью редьюсера.
<h3 id="пример">Пример</h3>
```javascript
import React, { useReducer } from 'react';
function reducer(state, action) {
switch (action.type) {
case 'increment':
return { count: state.count + 1 };
case 'decrement':
return { count: state.count - 1 };
default:
throw new Error();
}
}
function Counter() {
const [state, dispatch] = useReducer(reducer, { count: 0 });
return (
<div>
<p>Count: {state.count}</p>
<button onClick={() => dispatch({ type: 'increment' })}>+</button>
<button onClick={() => dispatch({ type: 'decrement' })}>-</button>
</div>
);
}
8. useLayoutEffect
Что такое `useLayoutEffect`?
`useLayoutEffect` выполняется синхронно после всех изменений DOM.Пример
```javascript import React, { useLayoutEffect, useRef } from 'react';function LayoutEffectExample() { const ref = useRef();
useLayoutEffect(() => { console.log('Layout effect:', ref.current.offsetHeight); });
return
---
<h2 id="итоговые-вопросы-для-подготовки">Итоговые вопросы для подготовки</h2>
1. Как работает `useState`, и какие типы данных можно хранить в состоянии?
2. В каких случаях использовать `useEffect` и чем он отличается от `useLayoutEffect`?
3. Когда применять `useMemo` и `useCallback`?
4. Какие задачи решает `useReducer`?
5. Как работает `useRef`, и где его лучше использовать?
6. Какие проблемы решает `useContext`?
**Совет:** Практикуйте использование всех основных хуков в небольших проектах, чтобы лучше понять их возможности и ограничения.