81 lines
4.8 KiB
Markdown
81 lines
4.8 KiB
Markdown
---
|
||
sidebar_position: 5
|
||
---
|
||
|
||
# Базовые хуки React
|
||
Источник: DeepSeek
|
||
|
||
React предоставляет несколько основных хуков, которые позволяют использовать состояние и другие возможности React в функциональных компонентах. Вот основные хуки:
|
||
|
||
1. **useState:**
|
||
- Позволяет добавлять состояние в функциональный компонент.
|
||
- Возвращает массив, где первый элемент — текущее значение состояния, а второй — функция для его обновления.
|
||
```js
|
||
const [count, setCount] = useState(0);
|
||
```
|
||
2. **useEffect:**
|
||
- Позволяет выполнять побочные эффекты в функциональных компонентах (например, запросы к API, подписки, ручное изменение DOM).
|
||
- Принимает два аргумента: функцию с эффектом и массив зависимостей (опционально).
|
||
```js
|
||
useEffect(() => {
|
||
document.title = `Вы нажали ${count} раз`;
|
||
}, [count]);
|
||
```
|
||
3. **useContext:**
|
||
- Позволяет использовать контекст в функциональных компонентах.
|
||
- Принимает объект контекста (созданный с помощью `React.createContext`) и возвращает текущее значение контекста.
|
||
```js
|
||
const value = useContext(MyContext);
|
||
```
|
||
4. **useReducer:**
|
||
- Альтернатива `useState` для управления сложным состоянием.
|
||
- Принимает редюсер (функцию, которая определяет, как состояние должно обновляться) и начальное состояние.
|
||
- Возвращает текущее состояние и функцию `dispatch` для отправки действий.
|
||
```js
|
||
const [state, dispatch] = useReducer(reducer, initialState);
|
||
```
|
||
5. **useCallback:**
|
||
- Возвращает мемоизированную версию колбэка, которая изменяется только при изменении зависимостей.
|
||
- Полезен для оптимизации производительности, когда колбэк передается в дочерние компоненты.
|
||
```js
|
||
const memoizedCallback = useCallback(() => {
|
||
doSomething(a, b);
|
||
}, [a, b]);
|
||
```
|
||
6. **useMemo:**
|
||
- Возвращает мемоизированное значение, которое пересчитывается только при изменении зависимостей.
|
||
- Полезен для оптимизации вычислений, которые требуют больших затрат ресурсов.
|
||
```js
|
||
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
|
||
```
|
||
7. **useRef:**
|
||
- Возвращает изменяемый объект, свойство `.current` которого инициализируется переданным аргументом.
|
||
- Используется для хранения мутабельных значений, которые не вызывают ререндер при изменении.
|
||
- Также может использоваться для получения ссылок на DOM-элементы.
|
||
```js
|
||
const inputRef = useRef(null);
|
||
```
|
||
8. **useImperativeHandle:**
|
||
- Позволяет настроить экземпляр значения, которое будет доступно при использовании `ref`.
|
||
- Обычно используется вместе с `forwardRef`.
|
||
```js
|
||
useImperativeHandle(ref, () => ({
|
||
focus() {
|
||
inputRef.current.focus();
|
||
}
|
||
}));
|
||
```
|
||
9. **useLayoutEffect:**
|
||
- Похож на `useEffect`, но выполняется синхронно после всех изменений DOM, но до того, как браузер отрисует изменения.
|
||
- Используется для измерений DOM или других операций, которые должны быть выполнены до отрисовки.
|
||
```js
|
||
useLayoutEffect(() => {
|
||
// Логика, которая должна выполниться до отрисовки
|
||
}, [dependencies]);
|
||
```
|
||
10. useDebugValue:
|
||
- Используется для отладки пользовательских хуков.
|
||
- Позволяет отображать метку для пользовательских хуков в инструментах разработчика React.
|
||
```js
|
||
useDebugValue(isOnline ? 'Online' : 'Offline');
|
||
``` |