{"type":"doc","content":[{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"🧠 1. "},{"type":"text","marks":[{"type":"bold"}],"text":"React сам по себе — синхронная библиотека"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"React "},{"type":"text","marks":[{"type":"bold"}],"text":"не знает"},{"type":"text","text":", когда и как вы загружаете данные, обращаетесь к API или выполняете промисы."},{"type":"hardBreak"},{"type":"text","text":"Его задача — "},{"type":"text","marks":[{"type":"bold"}],"text":"отрисовать интерфейс на основе состояния"},{"type":"text","text":" ("},{"type":"text","marks":[{"type":"code"}],"text":"state"},{"type":"text","text":" и "},{"type":"text","marks":[{"type":"code"}],"text":"props"},{"type":"text","text":")."},{"type":"hardBreak"},{"type":"text","text":"Асинхронность появляется, когда вы "},{"type":"text","marks":[{"type":"bold"}],"text":"изменяете состояние в результате внешней операции"},{"type":"text","text":" — и тогда React делает повторный рендер."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"⚙️ 2. "},{"type":"text","marks":[{"type":"bold"}],"text":"Типичный способ — через "},{"type":"text","marks":[{"type":"code"}],"text":"useEffect()"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Асинхронные операции в функциональных компонентах обычно выполняются "},{"type":"text","marks":[{"type":"bold"}],"text":"внутри "},{"type":"text","marks":[{"type":"code"}],"text":"useEffect"},{"type":"text","text":", потому что:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"эффект выполняется "},{"type":"text","marks":[{"type":"bold"}],"text":"после рендера"},{"type":"text","text":","}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"нельзя делать "},{"type":"text","marks":[{"type":"code"}],"text":"await"},{"type":"text","text":" напрямую в теле компонента (рендер должен быть чистой функцией)."}]}]}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Пример:"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"import { useState, useEffect } from \"react\";\n\nfunction UserProfile({ userId }) {\n const [user, setUser] = useState(null);\n\n useEffect(() => {\n let isMounted = true;\n\n async function fetchUser() {\n const res = await fetch(`/api/users/${userId}`);\n const data = await res.json();\n if (isMounted) setUser(data);\n }\n\n fetchUser();\n\n // cleanup — если компонент размонтируется до завершения запроса\n return () => {\n isMounted = false;\n };\n }, [userId]);\n\n if (!user) return

;\n return

Hello, {user.name}

;\n}\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"📌 Важно: "},{"type":"text","marks":[{"type":"code"}],"text":"useEffect"},{"type":"text","text":" нельзя сделать "},{"type":"text","marks":[{"type":"code"}],"text":"async"},{"type":"text","text":" напрямую — вместо этого создают "},{"type":"text","marks":[{"type":"bold"}],"text":"вложенную async-функцию"},{"type":"text","text":"."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"⚡ 3. "},{"type":"text","marks":[{"type":"bold"}],"text":"Асинхронные операции = побочные эффекты"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Классические примеры:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"загрузка данных из API ("},{"type":"text","marks":[{"type":"code"}],"text":"fetch"},{"type":"text","text":", "},{"type":"text","marks":[{"type":"code"}],"text":"axios"},{"type":"text","text":", GraphQL);"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"взаимодействие с WebSocket или SSE;"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"таймеры ("},{"type":"text","marks":[{"type":"code"}],"text":"setTimeout"},{"type":"text","text":", "},{"type":"text","marks":[{"type":"code"}],"text":"setInterval"},{"type":"text","text":");"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"операции с локальным хранилищем ("},{"type":"text","marks":[{"type":"code"}],"text":"localStorage"},{"type":"text","text":", "},{"type":"text","marks":[{"type":"code"}],"text":"IndexedDB"},{"type":"text","text":");"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"работа с внешними SDK (например, Firebase)."}]}]}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Все они выполняются "},{"type":"text","marks":[{"type":"bold"}],"text":"вне React"},{"type":"text","text":", но "},{"type":"text","marks":[{"type":"bold"}],"text":"влияют на состояние"},{"type":"text","text":"."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"🧩 4. "},{"type":"text","marks":[{"type":"bold"}],"text":"Современные подходы"}]},{"type":"heading","attrs":{"textAlign":null,"level":4},"content":[{"type":"text","text":"🔹 "},{"type":"text","marks":[{"type":"code"}],"text":"React Query"},{"type":"text","text":" (TanStack Query)"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Один из самых популярных способов работы с асинхронными данными — "},{"type":"text","marks":[{"type":"bold"}],"text":"TanStack Query"},{"type":"text","text":"."},{"type":"hardBreak"},{"type":"text","text":"Он:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"кэширует результаты;"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"автоматически повторяет запросы при фокусе окна;"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"поддерживает пагинацию, инвалидацию, optimistic updates."}]}]}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Пример:"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"import { useQuery } from \"@tanstack/react-query\";\n\nfunction UserProfile({ userId }) {\n const { data, isLoading } = useQuery({\n queryKey: [\"user\", userId],\n queryFn: () => fetch(`/api/users/${userId}`).then(r => r.json()),\n });\n\n if (isLoading) return

;\n return

Hello, {data.name}

;\n}\n"}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"⚛️ 5. "},{"type":"text","marks":[{"type":"bold"}],"text":"Асинхронность в React 18+ (Concurrent features)"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"React 18 представил "},{"type":"text","marks":[{"type":"bold"}],"text":"новые возможности для асинхронного рендера"},{"type":"text","text":":"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"startTransition()"},{"type":"text","text":" — позволяет пометить обновления как \"незначительные\", чтобы не блокировать UI."}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"useTransition()"},{"type":"text","text":" и "},{"type":"text","marks":[{"type":"code"}],"text":"useDeferredValue()"},{"type":"text","text":" — позволяют "},{"type":"text","marks":[{"type":"bold"}],"text":"отложить рендер"},{"type":"text","text":" или "},{"type":"text","marks":[{"type":"bold"}],"text":"плавно обновлять UI"},{"type":"text","text":"."}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"Suspense"},{"type":"text","text":" + "},{"type":"text","marks":[{"type":"code"}],"text":"React.lazy()"},{"type":"text","text":" — для "},{"type":"text","marks":[{"type":"bold"}],"text":"ленивой загрузки компонентов"},{"type":"text","text":" и "},{"type":"text","marks":[{"type":"bold"}],"text":"ожидания данных"},{"type":"text","text":"."}]}]}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Пример с Suspense:"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"const UserProfile = React.lazy(() => import(\"./UserProfile\"));\n\nfunction App() {\n return (\n Loading...

}>\n \n \n );\n}\n"}]},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"В React Server Components (RSC) асинхронность встроена — серверные компоненты "},{"type":"text","marks":[{"type":"bold"}],"text":"могут быть "},{"type":"text","marks":[{"type":"code"}],"text":"async"},{"type":"text","text":" и использовать "},{"type":"text","marks":[{"type":"code"}],"text":"await"},{"type":"text","text":" прямо в теле."}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"🧠 6. "},{"type":"text","marks":[{"type":"bold"}],"text":"Ключевая идея"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Асинхронность в React ≠ асинхронность React’а."},{"type":"hardBreak"},{"type":"text","text":"React остаётся "},{"type":"text","marks":[{"type":"bold"}],"text":"детерминированным и синхронным"},{"type":"text","text":" на уровне рендера,"},{"type":"hardBreak"},{"type":"text","text":"а асинхронность — это "},{"type":"text","marks":[{"type":"bold"}],"text":"способ изменения состояния извне"},{"type":"text","text":"."}]}]}

Работа с асинхронными операциями

Комментарии