React справочник

Безплатно

Търсим, удобен за печат справочник за React 19 — компоненти, JSX, хукове, новите Actions API, контекст, refs и производителност. Безплатно.

Компоненти и JSX

function App() { return <h1>Hi</h1>; }

Функционален компонент, връщащ JSX

export default function App() {}

Експортира компонент по подразбиране

<Greeting name="Ada" />

Рендира компонент с props

{1 + 2} or {user.name}

Вгражда JS израз с фигурни скоби

<>{a}{b}</>

Fragment групира възли, без допълнителен DOM

<div className="card">

Използва className, не class, за CSS

{isOpen && <Menu />}

Рендира условно с &&

{ok ? <Yes /> : <No />}

Избира между възли с тернарен оператор

{items.map(i => <li key={i.id}>{i.t}</li>)}

Рендира списък от масив

function Btn({ label, onClick }) {}

Деструктурира props в сигнатурата

function Card({ children }) { return children; }

Чете вложен JSX чрез props children

<input value={v} onChange={onChange} />

Контролиран вход, свързан със state

Рендиране и настройка

import { createRoot } from 'react-dom/client'

Импортира client root API

createRoot(document.getElementById('root')).render(<App/>)

Монтира приложението в DOM

import { StrictMode } from 'react'

Импортира обвивката StrictMode

<StrictMode><App /></StrictMode>

Открива бъгове при разработка

import { hydrateRoot } from 'react-dom/client'

Импортира hydration API

hydrateRoot(el, <App />)

Свързва React със сървърен HTML

root.unmount()

Демонтира монтиран root

import App from './App.jsx'

Импортира компонент от модул

<App {...props} />

Разпространява обект като props

export { Button, Card }

Експортира няколко компонента поименно

State и ефекти

const [count, setCount] = useState(0)

Декларира state променлива

setCount(c => c + 1)

Обновява спрямо предишната стойност

setUser(u => ({ ...u, name }))

Обновява обектен state неизменно

useEffect(() => { run(); }, [dep])

Изпълнява ефект при промяна на зависимостите

useEffect(() => { /* once */ }, [])

Изпълнява ефект само при монтиране

useEffect(() => () => cleanup(), [])

Връща функция за почистване

const ref = useRef(null)

Съхранява променлива стойност между рендиранията

const [state, dispatch] = useReducer(r, init)

Управлява сложен state с reducer

const theme = useContext(ThemeContext)

Чете най-близката context стойност

const memo = useMemo(() => calc(a), [a])

Мемоизира скъпо изчисление

useLayoutEffect(() => {}, [])

Изпълнява синхронно след layout

useSyncExternalStore(sub, get)

Абонира се за външно хранилище

React 19 hook-ове и API

import { use } from 'react'

Импортира новото use API

const data = use(promise)

Чете promise, изчаква до готовност

const theme = use(ThemeContext)

Чете context, позволено условно

const [state, action, pending] = useActionState(fn, init)

Проследява state, action и pending

const [opt, addOpt] = useOptimistic(state, reducer)

Показва оптимистична стойност веднага

const { pending } = useFormStatus()

Чете статуса на submit на родителската форма

const [isPending, startTransition] = useTransition()

Маркира обновяванията като неспешни

startTransition(async () => await save())

Изпълнява асинхронен Action в transition

const deferred = useDeferredValue(value)

Отлага стойност, за да поддържа UI отзивчив

const id = useId()

Генерира стабилен уникален id

<title>Page title</title>

Рендира метаданни навсякъде в дървото

function Input({ ref }) {}

ref е нормален prop, без forwardRef

Форми и Actions

<form action={handleSubmit}>

Подава функция като Action на форма

function handleSubmit(formData) {}

Action получава FormData

formData.get('email')

Чете поле от FormData

const [state, action] = useActionState(submit, null)

Свързва Action със state на компонент

<form action={action}>

Използва обвития Action на формата

const [s, a, pending] = useActionState(fn, init)

Излага флаг pending за UI

return { error: 'Invalid' }

Връща error state от Action

function Submit() { const { pending } = useFormStatus() }

Чете pending вътре в бутона за submit

<button disabled={pending}>Save</button>

Деактивира submit, докато е pending

import { requestFormReset } from 'react-dom'

Импортира помощника за нулиране на форма

requestFormReset(formEl)

Нулира неконтролирана форма

<form action={action}><Submit /></form>

Композира Action форма със статус

Props и композиция

function Hi({ name = 'Guest' }) {}

Prop по подразбиране чрез деструктуриране

function Box({ children }) { return children; }

Обвива съдържание с props children

<Box><p>Inside</p></Box>

Подава JSX като children

function List({ render }) { return render(); }

Шаблон render prop

<List render={() => <Item />} />

Предоставя render функция

<Input {...props} />

Препраща всички props със spread

const { id, ...rest } = props

Избира prop и подава останалите

<Avatar {...rest} size="lg" />

Spread, после заменя prop

function Btn(props: BtnProps) {}

Типизира props с TypeScript интерфейси

<Slot label={<b>Hi</b>} />

Подава JSX през именуван prop

Събития

<button onClick={handleClick}>

Прикача handler за click

function handleClick(e) {}

Получава синтетичното събитие

<input onChange={e => set(e.target.value)} />

Чете входна стойност при промяна

<form onSubmit={e => e.preventDefault()}>

Спира подразбиращия се submit на формата

e.stopPropagation()

Предотвратява разпространението на събитието нагоре

<li onClick={() => remove(id)}>

Подава аргументи чрез closure

<input onKeyDown={e => e.key === 'Enter'}

Обработва конкретно натискане на клавиш

<div onMouseEnter={hover}>

Слуша за pointer събития

e.currentTarget.value

Чете елемента, на който е handler-ът

<button onClick={() => {}} type="button">

Избягва неявно изпращане на форма

Списъци и ключове

arr.map(x => <li key={x.id}>{x.t}</li>)

Рендира по един възел на елемент

key={item.id}

Дава на всеки елемент стабилен key

key={index}

Index ключове само за статични списъци

users.map(u => <Card key={u.id} {...u} />)

Разпространява полетата на елемента като props

{list.length === 0 && <Empty />}

Показва резервен вариант за празни списъци

import { Fragment } from 'react'

Импортира Fragment за групи с ключове

<Fragment key={id}>{a}{b}</Fragment>

Fragment с ключ в списък

{rows.filter(r => r.on).map(...)}

Филтрира преди мапване

Keys must be unique among siblings

Защо ключовете помагат на React да diff-ва списъци

{[...Array(n)].map((_, i) => ...)}

Мапва диапазон с фиксирана дължина

Context

const ThemeContext = createContext('light')

Създава context със стойност по подразбиране

import { createContext } from 'react'

Импортира фабриката за context

<ThemeContext value={theme}>

Предоставя стойност (синтаксис на React 19)

<ThemeContext value={theme}><App /></ThemeContext>

Обвива дървото, което я чете

const theme = useContext(ThemeContext)

Чете context с useContext

const theme = use(ThemeContext)

Чете context с use API

if (cond) { const t = use(Ctx); }

use може да чете context условно

export const ThemeContext = createContext()

Експортира споделен context

<Ctx value={{ user, setUser }}>

Подава обект като стойност

Avoid new objects each render

Мемоизира стойности, за да ограничи повторни рендирания

Refs

const inputRef = useRef(null)

Създава държател на ref

<input ref={inputRef} />

Прикача ref към възел

inputRef.current.focus()

Достъп до DOM възела чрез current

function Field({ ref }) { return <input ref={ref} /> }

ref като prop, без forwardRef

<Field ref={inputRef} />

Подава ref на компонент

useImperativeHandle(ref, () => ({ focus }))

Излага императивен API

const setRef = node => { box = node; }

Използва callback ref

<div ref={setRef} />

Прикача callback ref

const count = useRef(0)

Съхранява стойност без повторно рендиране

ref={node => { return () => cleanup(); }}

Callback ref с почистване (React 19)

Производителност

const Memo = memo(Component)

Пропуска повторно рендиране при равни props

import { memo } from 'react'

Импортира помощника memo

const value = useMemo(() => calc(a), [a])

Кешира изчислена стойност

const fn = useCallback(() => f(a), [a])

Кешира идентичността на функция

const Lazy = lazy(() => import('./Big.jsx'))

Разделя компонент на части (code-split)

import { lazy, Suspense } from 'react'

Импортира lazy и Suspense

<Suspense fallback={<Spin />}><Lazy /></Suspense>

Показва резервен вариант по време на зареждане

startTransition(() => setQuery(q))

Маркира неспешни state обновявания

const slow = useDeferredValue(query)

Отлага скъпо производно UI

React Compiler auto-memoizes

Често премахва ръчната мемоизация

Разни и метаданни

<Suspense fallback={<Loading />}>

Граница за асинхронно съдържание

class ErrorBoundary extends Component {}

Прихваща грешки при рендиране (стар клас)

<title>My Page</title>

Издига заглавието на документа от компонент

<meta name="description" content="..." />

Рендира meta тагове в head

<link rel="stylesheet" href="..." />

Издига връзка към stylesheet

<Comp key={id} />

Сменя key, за да премонтира компонент

React.lazy(() => import('./Page.jsx'))

Лениво импортира компонент на маршрут

createPortal(node, container)

Рендира в различен DOM възел

{/* a comment */}

Пише коментар вътре в JSX

cleanup return in useEffect

Винаги освобождавайте абонаменти/таймери

Няма запис, който да съответства на „:q“.

Нуждаете се от помощ?

Открихте проблем с този инструмент? Кажете ни.

Докладване на проблем

Добавете този безплатен инструмент към собствения си уебсайт — копирайте и поставете кода по-долу.

<iframe src="https://tweakee.com/bg/studio/dev/react-cheatsheet?embed=1" width="100%" height="720" style="border:1px solid #e2e8f0;border-radius:12px;max-width:680px;" loading="lazy"></iframe>