88 lines
3.7 KiB
Markdown
88 lines
3.7 KiB
Markdown
---
|
||
sidebar_position: 10
|
||
---
|
||
|
||
# Pure function
|
||
|
||
Чистая функция не меняет никаких объектов или переменных, которые существовали до её вызова. При указании одинаковых входных данных должен быть всегда один и тот же результат.
|
||
|
||
В контексте **React** чистая функция — это **функция, которая**:
|
||
1. **Детерминирована** — при одинаковых входных данных всегда возвращает одинаковый результат.
|
||
2. **Не изменяет внешнее состояние** — не мутирует `props`, `state` или глобальные переменные.
|
||
|
||
React предполагает, что каждый написанный компонент является чистой функцией. React всегда должен возвращать один и тот же JSX при одинаковых входных данных.
|
||
|
||
## Примеры чистых и нечистых функций в React
|
||
✅ Чистая функция (без побочных эффектов):
|
||
```tsx
|
||
function add(a: number, b: number) {
|
||
return a + b;
|
||
}
|
||
|
||
console.log(add(2, 3)); // 5
|
||
console.log(add(2, 3)); // 5 (всегда один и тот же результат)
|
||
|
||
```
|
||
|
||
❌ Нечистая функция (изменяет внешнее состояние):
|
||
```tsx
|
||
let total = 0;
|
||
function addToTotal(value: number) {
|
||
total += value;
|
||
return total;
|
||
}
|
||
|
||
console.log(addToTotal(5)); // 5
|
||
console.log(addToTotal(5)); // 10 (изменяется внешнее состояние!)
|
||
|
||
```
|
||
|
||
## Чистые функции в React-компонентах
|
||
✅ Функциональные компоненты в React должны быть чистыми!
|
||
```tsx
|
||
function Greeting({ name }: { name: string }) {
|
||
return <h1>Hello, {name}!</h1>;
|
||
}
|
||
```
|
||
📌 Этот компонент:
|
||
- Всегда рендерит один и тот же вывод для одного name.
|
||
- Не изменяет props и state.
|
||
|
||
❌ Нечистая компонента (мутирует пропсы!):
|
||
```tsx
|
||
function BadComponent(props: { user: { name: string } }) {
|
||
props.user.name = "Hacked!"; // ❌ Изменяем пропсы — это плохо!
|
||
return <h1>Hello, {props.user.name}!</h1>;
|
||
}
|
||
```
|
||
📌 Почему плохо?
|
||
- Нарушает принципы React.
|
||
- Может вызвать неожиданные баги.
|
||
|
||
## Где React использует чистые функции?
|
||
|
||
✔️ useReducer
|
||
|
||
```tsx
|
||
function reducer(state: number, action: { type: string }) {
|
||
switch (action.type) {
|
||
case "increment":
|
||
return state + 1;
|
||
case "decrement":
|
||
return state - 1;
|
||
default:
|
||
return state;
|
||
}
|
||
}
|
||
```
|
||
📌 reducer — чистая функция: всегда возвращает новый state, не мутируя старый.
|
||
✔️ useMemo и useCallback
|
||
Используются для оптимизации **чистых функций** и предотвращения лишних ререндеров.
|
||
|
||
## Итог
|
||
- ✅ Чистые функции не мутируют props и state, не создают побочные эффекты.
|
||
- ✅ Функциональные компоненты должны быть чистыми.
|
||
- ✅ useReducer, useMemo, useCallback — инструменты для работы с чистыми функциями.
|
||
- ❌ Нечистые функции могут вызывать баги и ухудшать производительность.
|
||
|
||
🚀 **_Источник: ChatGPT_** |