redrockjs/frontend-docs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update browser

Browse Source
This commit is contained in:
Valery Grunenko
2025-03-06 16:09:21 +03:00
parent 1445c4f31f
commit 7484909864
16 changed files with 572 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/react/02-v-dom.md
View File

@@ -57,4 +57,4 @@ Reconciliation — это процесс сравнения старого и н
## Итог
- **Virtual DOM** — это оптимизированная копия реального DOM, которая позволяет React быстро обновлять интерфейс.
- **Reconciliation** — это процесс сравнения старого и нового Virtual DOM для определения минимального набора изменений.
- Вместе эти механизмы делают React быстрым, эффективным и удобным для разработки сложных интерфейсов.
Вместе эти механизмы делают React быстрым, эффективным и удобным для разработки сложных интерфейсов.

29
docs/react/03-lifecycle.md
View File

@@ -3,3 +3,32 @@ sidebar_position: 3
---
# Жизненный цикл компонента
Жизненный цикл компонента в React описывает этапы, через которые проходит компонент от момента его создания до удаления из DOM. Эти этапы включают инициализацию, обновление и удаление компонента. React предоставляет методы жизненного цикла, которые позволяют разработчикам управлять поведением компонента на каждом этапе.
## Основные этапы жизненного цикла компонента:
1. **Монтирование (Mounting):**
Компонент создается и вставляется в DOM.
- `constructor(props)`: Вызывается до того, как компонент будет смонтирован. Используется для инициализации состояния и привязки методов.
- `static getDerivedStateFromProps(props, state)`: Вызывается непосредственно перед рендерингом, как при монтировании, так и при обновлении. Позволяет компоненту обновить состояние на основе изменений в пропсах.
- `render()`: Метод, который возвращает JSX. Он отвечает за отображение компонента в DOM.
- `componentDidMount()`: Вызывается сразу после монтирования компонента в DOM. Здесь можно выполнять запросы к серверу, подписываться на события или работать с DOM.
2. **Обновление (Updating):**
Компонент обновляется при изменении состояния или пропсов.
- `static getDerivedStateFromProps(props, state)`: Вызывается перед рендерингом при обновлении компонента.
- `shouldComponentUpdate(nextProps, nextState)`: Позволяет оптимизировать производительность, определяя, нужно ли перерисовывать компонент. Возвращает true или false.
- `render()`: Перерисовывает компонент, если это необходимо.
- `getSnapshotBeforeUpdate(prevProps, prevState)`: Вызывается прямо перед тем, как изменения из виртуального DOM будут применены к реальному DOM. Позволяет получить информацию о DOM перед обновлением.
- `componentDidUpdate(prevProps, prevState, snapshot)`: Вызывается после обновления компонента. Здесь можно выполнять дополнительные действия, такие как запросы к серверу или обновление состояния.
3. **Размонтирование (Unmounting):**
Компонент удаляется из DOM.
- `componentWillUnmount()`: Вызывается перед удалением компонента из DOM. Здесь можно выполнять очистку, такую как отмена таймеров, отписка от событий или отмена сетевых запросов.
4. **Обработка ошибок (Error Handling):**
React также предоставляет методы для обработки ошибок, которые происходят в компонентах.
- `static getDerivedStateFromError(error)`: Вызывается после возникновения ошибки в дочернем компоненте. Позволяет обновить состояние для отображения запасного UI.
- `componentDidCatch(error, info)`: Вызывается после возникновения ошибки. Позволяет логировать ошибки или выполнять другие действия.
С появлением React Hooks в версии 16.8, функциональные компоненты также получили возможность использовать аналогичные методы жизненного цикла с помощью хуков, таких как `useEffect`. Это сделало функциональные компоненты более мощными и гибкими.
Таким образом, жизненный цикл компонента в React позволяет разработчикам контролировать поведение компонента на всех этапах его существования, что делает React мощным инструментом для создания динамических и отзывчивых пользовательских интерфейсов.

62
docs/react/04-props-state.md
View File

@@ -2,4 +2,64 @@
sidebar_position: 4
---
# Состояние и пропсы компонентов
# Состояние и пропсы компонентов
В React состояние (state) и пропсы (props) — это два основных способа управления данными в компонентах. Они позволяют
компонентам быть динамичными и реагировать на изменения данных. Однако они используются в разных ситуациях и имеют свои
особенности.
- **Props** — это данные, которые передаются в компонент извне. Они неизменяемы.
- **State** — это внутренние данные компонента, которые могут изменяться. Состояние делает компонент динамичным и
реактивным.
## Props (Properties)
Пропсы — это входные данные, которые передаются в компонент извне (обычно от родительского компонента). Они
неизменяемы (immutable), то есть компонент не может изменять свои пропсы, а только читать их.
**Основные особенности:**
1. **Передача данных сверху вниз:** Пропсы передаются от родительского компонента к дочернему.
2. **Неизменяемость:** Компонент не может изменять свои пропсы. Они доступны только для чтения.
3. **Использование:** Пропсы используются для передачи данных, конфигурации или callback-функций в компонент.
## State (Состояние)
Состояние — это внутренние данные компонента, которые могут изменяться со временем. Состояние управляется самим
компонентом и используется для хранения информации, которая может изменяться в результате пользовательских действий,
сетевых запросов или других событий.
**Основные особенности:**
1. **Локальность:** Состояние принадлежит конкретному компоненту и не может быть доступно извне (если не передано через
пропсы).
2. **Изменяемость:** Состояние можно изменять с помощью метода `setState` (в классовых компонентах) или функции
обновления
состояния (в функциональных компонентах с использованием хука `useState`).
3. **Реактивность:** При изменении состояния React автоматически перерисовывает компонент.
## Различия между State и Props
| Характеристика | Props | State |
|-----------------|-------------------------------------------|-----------------------------------------------|
| Источник данных | Передаются извне (родительский компонент) | Управляются внутри компонента |
| Изменяемость | Неизменяемы (read-only) | Изменяемы (через `setState` или `useState`) |
| Использование | Для передачи данных и callback-функций | Для хранения данных, которые могут изменяться |
| Доступность | Доступны в дочерних компонентах | Локальны для компонента |
## Когда использовать Props, а когда State?
- Props:
- Когда данные передаются от родительского компонента к дочернему.
- Когда данные не должны изменяться внутри компонента.
- Для передачи callback-функций, которые могут изменять состояние родительского компонента.
- State:
- Когда данные должны изменяться внутри компонента (например, в ответ на действия пользователя).
- Для хранения временных данных, таких как ввод пользователя, состояние загрузки и т.д.
## Взаимодействие State и Props
Часто состояние родительского компонента передается в дочерний компонент через пропсы. Если дочерний компонент должен
изменить эти данные, он может вызвать callback-функцию, переданную через пропсы, которая изменит состояние родительского
компонента.

77
docs/react/05-base-hooks.md
View File

@@ -2,4 +2,79 @@
sidebar_position: 5
---
# Базовые хуки React
# Базовые хуки 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');
```

39
docs/react/06-hocs.md
View File

@@ -2,4 +2,41 @@
sidebar_position: 6
---
# Что такое HOC
# Что такое HOC
Higher-Order Components (HOC) — это продвинутая техника в React для повторного использования логики компонентов. HOC — это функция, которая принимает компонент и возвращает новый компонент с дополнительными свойствами или поведением. Это похоже на паттерн декоратора в программировании.
## Основные идеи HOC:
1. **Принимает компонент и возвращает новый компонент:**
- HOC не изменяет оригинальный компонент, а создает новый, оборачивая его и добавляя новую функциональность.
2. **Используется для повторного использования логики:**
- HOC позволяет вынести общую логику (например, загрузку данных, управление состоянием, логику авторизации) в отдельную функцию, которую можно применять к разным компонентам.
3. **Не изменяет оригинальный компонент:**
- HOC создает новый компонент, оставляя оригинальный неизменным.
## Преимущества HOC:
1. Повторное использование кода:
- Логика загрузки данных, управление состоянием и другие общие задачи могут быть вынесены в HOC и использованы в разных компонентах.
2. Разделение ответственности:
- Компоненты остаются простыми и сосредоточены только на отображении данных, а HOC отвечает за логику.
3. Гибкость:
- HOC можно комбинировать, создавая сложные цепочки функциональности.
## Недостатки HOC:
1. Сложность отладки:
- HOC добавляют уровень вложенности в дерево компонентов, что может усложнить отладку.
2. Проблемы с именованием пропсов:
- Если несколько HOC передают одинаковые пропсы, могут возникнуть конфликты.
3. Усложнение кода:
- Чрезмерное использование HOC может сделать код менее читаемым и понятным.
## Альтернативы HOC:
С появлением хуков (например, `useState`, `useEffect`, `useContext`), многие задачи, которые раньше решались с помощью HOC, теперь можно реализовать с помощью пользовательских хуков. Это часто делает код более понятным и менее сложным.
## Когда использовать HOC:
- Если вам нужно добавить одну и ту же логику к нескольким компонентам.
- Если вы работаете с классовыми компонентами (хуки доступны только в функциональных компонентах).
- Если вы предпочитаете паттерн декоратора.
В остальных случаях, особенно в новых проектах, рекомендуется использовать хуки, так как они проще и удобнее.

109
docs/react/07-optimization-hooks.md
View File

@@ -2,4 +2,111 @@
sidebar_position: 7
---
# Хуки оптимизации и кэширования
# Хуки оптимизации и кэширования
## useCallback
`useCallback` — это хук в React, который используется для мемоизации функций. Он помогает оптимизировать производительность компонентов, особенно когда речь идет о передаче функций в дочерние компоненты или их использование в зависимостях других хуков, таких как `useEffect`.
### Зачем нужен useCallback?
1. **Оптимизация рендеринга дочерних компонентов:**
- В React компоненты перерисовываются, если изменяются их пропсы или состояние.
- Если вы передаете функцию как пропс в дочерний компонент, и эта функция создается заново при каждом рендере родительского компонента, то дочерний компонент будет перерисовываться даже если это не нужно.
- `useCallback` позволяет сохранить ссылку на одну и ту же функцию между рендерами, если её зависимости не изменились. Это предотвращает ненужные перерисовки дочерних компонентов.
2. **Избежание лишних вызовов `useEffect`:**
- Если функция используется в зависимостях `useEffect`, то каждый раз, когда функция создается заново, `useEffect` будет срабатывать снова.
- useCallback позволяет избежать этого, сохраняя стабильную ссылку на функцию.
3. **Улучшение производительности:**
- Создание функций в JavaScript — это операция, которая занимает время и память. Если функция не изменяется, то нет смысла создавать её заново при каждом рендере.
### Как работает useCallback?
`useCallback` принимает два аргумента:
1. Функция, которую нужно мемоизировать.
2. Массив зависимостей.
Хук возвращает мемоизированную версию функции, которая изменяется только тогда, когда изменяются значения в массиве зависимостей.
### Когда использовать useCallback?
- Когда функция передается в качестве пропса в дочерний компонент, который оптимизирован с помощью `React.memo`.
- Когда функция используется в зависимостях других хуков, таких как `useEffect`.
- Когда создание функции является дорогостоящей операцией.
### Когда не нужно использовать useCallback?
- Если функция не передается в дочерние компоненты или не используется в зависимостях других хуков.
- Если функция простая и её создание не влияет на производительность.
Использование `useCallback` должно быть обоснованным, так как избыточное применение может усложнить код и не принести значительной пользы.
## React.memo
**React.memo** — это функция высшего порядка (Higher-Order Component, HOC), которая используется для оптимизации производительности функциональных компонентов в React. Она позволяет избежать лишних рендеров компонента, если его пропсы не изменились.
### Как работает React.memo?
Когда вы оборачиваете компонент в `React.memo`, React запоминает (мемоизирует) результат его рендеринга. При последующих рендерах React сравнивает текущие пропсы с предыдущими. Если пропсы не изменились, React использует закэшированный результат рендеринга, вместо того чтобы выполнять рендер компонента заново.
### Кастомная функция сравнения:
По умолчанию React.memo поверхностно сравнивает пропсы (с использованием Object.is). Если вам нужно более сложное сравнение, вы можете передать вторым аргументом кастомную функцию сравнения:
```js
const MyComponent = React.memo(
function MyComponent(props) {
// Логика компонента
},
(prevProps, nextProps) => {
// Возвращает true, если пропсы считаются равными (рендер не нужен)
// Возвращает false, если пропсы изменились (рендер нужен)
return prevProps.value === nextProps.value;
}
);
```
### Когда использовать React.memo?
1. **Компоненты, которые часто рендерятся с одинаковыми пропсами:**
- Если компонент часто рендерится, но его пропсы редко меняются, React.memo поможет избежать лишних рендеров.
2. **Тяжелые компоненты:**
- Если компонент выполняет сложные вычисления или рендерит большое количество элементов, `React.memo` может значительно улучшить производительность.
3. **Компоненты, которые получают стабильные пропсы:**
- Если пропсы компонента редко меняются (например, данные из контекста или мемоизированные значения), `React.memo` будет полезен.
### Когда не нужно использовать React.memo?
1. **Легковесные компоненты:**
- Если компонент простой и его рендер не требует значительных ресурсов, использование `React.memo` может быть избыточным.
2. **Компоненты, пропсы которых часто меняются:**
- Если пропсы компонента часто меняются, `React.memo` не принесет пользы, так как компонент всё равно будет перерисовываться.
3. **Компоненты с побочными эффектами:**
- Если компонент зависит от побочных эффектов (например, от глобального состояния), `React.memo` может не сработать как ожидается.
### Важные моменты:
- `React.memo` работает только с функциональными компонентами.
- Он не предотвращает рендеры, вызванные изменением состояния внутри компонента.
- Используйте `React.memo` только там, где это действительно необходимо, чтобы не усложнять код без нужды.
## useMemo
Хук `useMemo` в React используется для мемоизации (запоминания) значений. Он позволяет оптимизировать производительность, избегая повторных вычислений значений, которые не изменились между рендерами. Это особенно полезно для дорогостоящих вычислений или операций, которые зависят от определенных данных.
### Как работает useMemo?
useMemo принимает два аргумента:
1. **Функция, которая возвращает значение** (эта функция будет выполнена только при изменении зависимостей).
2. **Массив зависимостей** — список значений, при изменении которых функция будет выполнена заново.
Хук возвращает мемоизированное значение, которое будет пересчитано только при изменении зависимостей.
```js
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
```
### Когда использовать useMemo?
1. **Дорогостоящие вычисления:**
- Если у вас есть сложные вычисления, которые занимают много времени (например, сортировка больших массивов, математические операции и т.д.), `useMemo` поможет избежать их повторного выполнения.
2. **Оптимизация рендеров:**
- Если значение используется в рендере компонента и зависит от пропсов или состояния, `useMemo` предотвратит лишние рендеры, если зависимости не изменились.
3. **Передача мемоизированных значений в дочерние компоненты:**
- Если вы передаете вычисленное значение как пропс в дочерний компонент, `useMemo` поможет избежать лишних рендеров дочернего компонента.
### Когда не нужно использовать useMemo?
1. **Легковесные вычисления:**
- Если вычисления простые и не требуют значительных ресурсов, использование `useMemo` может быть избыточным.
2. **Часто изменяющиеся зависимости:**
- Если зависимости часто меняются, `useMemo` не принесет пользы, так как значение будет пересчитываться при каждом рендере.
3. **Не связанные с рендером значения:**
- Если значение не используется в рендере или не влияет на производительность, `useMemo` не нужен.
### Важные моменты:
- `useMemo` не гарантирует, что функция не будет выполнена. Она может быть вызвана React для "подстраховки" (например, при изменении приоритетов рендеринга).
- Используйте `useMemo` только там, где это действительно необходимо, чтобы не усложнять код без нужды.