150 lines
8.3 KiB
Markdown
150 lines
8.3 KiB
Markdown
---
|
||
sidebar_position: 5
|
||
---
|
||
|
||
# Базовые хуки React
|
||
|
||
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');
|
||
```
|
||
|
||
11. **useTransition:** позволяет вам обновлять состояние без блокировки пользовательского интерфейса. Он особенно полезен для оптимизации
|
||
производительности при медленных рендерах или когда вам нужно отложить менее важные обновления.
|
||
|
||
```jsx
|
||
import {useTransition} from 'react';
|
||
|
||
function MyComponent() {
|
||
const [isPending, startTransition] = useTransition();
|
||
|
||
// ...
|
||
}
|
||
```
|
||
|
||
- `startTransition` - функция, которая позволяет пометить обновления состояния как переходные (неблокирующие)
|
||
- `isPending` - булево значение, указывающее, активен ли в данный момент переход
|
||
|
||
**Когда использовать**
|
||
- **Медленные рендеры:** Когда у вас есть сложные вычисления или тяжелые компоненты, которые могут заблокировать UI
|
||
- **Отложенные обновления:** Когда некоторые обновления состояния могут быть отложены в пользу более важных
|
||
- **Улучшение воспринимаемой производительности:** Чтобы пользователь видел немедленный отклик на свои действия
|
||
|
||
**Особенности**
|
||
- **Приоритизация обновлений:** Обновления внутри startTransition имеют более низкий приоритет
|
||
- **Индикация загрузки:** isPending позволяет показать пользователю, что происходит фоновая загрузка
|
||
- **Совместимость с Suspense:** Хорошо работает вместе с Suspense для плавных переходов между состояниями
|
||
**Отличие от других подходов**
|
||
- **useDeferredValue:** Вместо управления обновлениями, откладывает значение
|
||
- **setTimeout:** useTransition интегрирован в планировщик React и работает более предсказуемо
|
||
|
||
12. **useDeferredValue** позволяет отложить обновление части UI, чтобы избежать блокировки основного потока при выполнении ресурсоемких операций. Он похож на `debounce` или `throttle`, но интегрирован в механизм рендеринга React.
|
||
|
||
**Когда использовать**
|
||
- Оптимизация производительности при работе с медленными или тяжелыми компонентами
|
||
- Отложенный рендеринг не критичных частей интерфейса
|
||
- Синхронизация нескольких состояний, когда одно зависит от другого, но может обновляться с задержкой
|
||
```jsx
|
||
import { useDeferredValue } from 'react';
|
||
|
||
function MyComponent({ value }) {
|
||
const deferredValue = useDeferredValue(value);
|
||
|
||
// ...
|
||
}
|
||
```
|
||
|
||
🚀 **_Источник: DeepSeek_** \
|
||
🚀 **Источник: [YT: useTransition и useDeferredValue хуки в React](https://www.youtube.com/watch?v=hWUlv7M7rR8)** |