برگه تقلب React
مرجع React 19 قابل جستوجو و چاپ — کامپوننتها، JSX، hookها، APIهای جدید Actions، context، refها و کارایی. رایگان.
کامپوننتها و JSX
12function App() { return <h1>Hi</h1>; }
یک function component که JSX بازمیگرداند
export default function App() {}
default-export یک کامپوننت
<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 />}
انتخاب بین گرهها با یک ternary
{items.map(i => <li key={i.id}>{i.t}</li>)}
رندر یک لیست از یک آرایه
function Btn({ label, onClick }) {}
destructure کردن props در امضا
function Card({ children }) { return children; }
خواندن JSX تودرتو از طریق prop به نام children
<input value={v} onChange={onChange} />
ورودی کنترلشده وابسته به state
رندر و راهاندازی
10import { createRoot } from 'react-dom/client'
وارد کردن client root API
createRoot(document.getElementById('root')).render(<App/>)
mount کردن برنامه در DOM
import { StrictMode } from 'react'
وارد کردن wrapper به نام StrictMode
<StrictMode><App /></StrictMode>
آشکارسازی باگها در توسعه
import { hydrateRoot } from 'react-dom/client'
وارد کردن hydration API
hydrateRoot(el, <App />)
اتصال React به HTML سرور
root.unmount()
برچیدن یک root از mount درآمده
import App from './App.jsx'
وارد کردن یک کامپوننت از یک ماژول
<App {...props} />
spread یک شیء بهعنوان props
export { Button, Card }
named-export چند کامپوننت
state و effectها
12const [count, setCount] = useState(0)
اعلام یک متغیر state
setCount(c => c + 1)
بهروزرسانی از مقدار قبلی
setUser(u => ({ ...u, name }))
بهروزرسانی state شیء بهصورت immutable
useEffect(() => { run(); }, [dep])
اجرای یک effect هنگام تغییر depها
useEffect(() => { /* once */ }, [])
اجرای یک effect تنها هنگام mount
useEffect(() => () => cleanup(), [])
بازگرداندن یک تابع cleanup
const ref = useRef(null)
نگهداشتن یک مقدار mutable در میان رندرها
const [state, dispatch] = useReducer(r, init)
مدیریت state پیچیده با یک reducer
const theme = useContext(ThemeContext)
خواندن نزدیکترین مقدار context
const memo = useMemo(() => calc(a), [a])
memoize کردن یک محاسبه پرهزینه
useLayoutEffect(() => {}, [])
اجرای همگام پس از layout
useSyncExternalStore(sub, get)
اشتراک در یک store بیرونی
hookها و APIهای React 19
12import { 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)
نمایش فوری یک مقدار optimistic
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>
رندر metadata در هر جای درخت
function Input({ ref }) {}
ref یک prop معمولی است، بدون forwardRef
فرمها و Actionها
12<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' }
بازگرداندن state خطا از یک Action
function Submit() { const { pending } = useFormStatus() }
خواندن pending درون دکمه submit
<button disabled={pending}>Save</button>
غیرفعالکردن submit هنگام pending
import { requestFormReset } from 'react-dom'
وارد کردن ابزار reset فرم
requestFormReset(formEl)
بازنشانی یک فرم uncontrolled
<form action={action}><Submit /></form>
ترکیب فرم Action با status
props و ترکیببندی
10function Hi({ name = 'Guest' }) {}
prop پیشفرض از طریق destructuring
function Box({ children }) { return children; }
احاطه محتوا با prop به نام children
<Box><p>Inside</p></Box>
ارسال JSX بهعنوان children
function List({ render }) { return render(); }
الگوی render prop
<List render={() => <Item />} />
ارائه یک تابع render
<Input {...props} />
forward همه props با spread
const { id, ...rest } = props
برداشتن یک prop و ارسال بقیه
<Avatar {...rest} size="lg" />
spread سپس بازنویسی یک prop
function Btn(props: BtnProps) {}
نوعدهی props با interfaceهای TypeScript
<Slot label={<b>Hi</b>} />
ارسال JSX از طریق یک prop نامدار
رویدادها
10<button onClick={handleClick}>
افزودن یک هندلر کلیک
function handleClick(e) {}
دریافت رویداد synthetic
<input onChange={e => set(e.target.value)} />
خواندن یک مقدار ورودی هنگام change
<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
خواندن عنصری که هندلر روی آن است
<button onClick={() => {}} type="button">
اجتناب از submit ضمنی فرم
لیستها و keyها
10arr.map(x => <li key={x.id}>{x.t}</li>)
رندر یک گره برای هر قلم
key={item.id}
دادن یک key پایدار به هر قلم
key={index}
keyهای اندیس تنها برای لیستهای ایستا
users.map(u => <Card key={u.id} {...u} />)
spread فیلدهای قلم بهعنوان props
{list.length === 0 && <Empty />}
نمایش یک fallback برای لیستهای خالی
import { Fragment } from 'react'
وارد کردن Fragment برای گروههای keyدار
<Fragment key={id}>{a}{b}</Fragment>
یک fragment با key در یک لیست
{rows.filter(r => r.on).map(...)}
فیلتر پیش از map کردن
Keys must be unique among siblings
چرا keyها به diff لیستها در React کمک میکنند
{[...Array(n)].map((_, i) => ...)}
map کردن یک بازه با طول ثابت
context
10const 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
memoize کردن مقادیر برای محدودکردن رندرهای مجدد
refها
10const 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 با cleanup (React 19)
کارایی
10const Memo = memo(Component)
رد رندر مجدد وقتی props برابرند
import { memo } from 'react'
وارد کردن ابزار memo
const value = useMemo(() => calc(a), [a])
cache کردن یک مقدار محاسبهشده
const fn = useCallback(() => f(a), [a])
cache کردن هویت یک تابع
const Lazy = lazy(() => import('./Big.jsx'))
code-split یک کامپوننت
import { lazy, Suspense } from 'react'
وارد کردن lazy و Suspense
<Suspense fallback={<Spin />}><Lazy /></Suspense>
نمایش یک fallback هنگام بارگذاری
startTransition(() => setQuery(q))
علامتگذاری بهروزرسانیهای state غیرفوری
const slow = useDeferredValue(query)
بهتعویقانداختن UI مشتقشده پرهزینه
React Compiler auto-memoizes
اغلب memoization دستی را حذف میکند
متفرقه و metadata
10<Suspense fallback={<Loading />}>
boundary برای محتوای ناهمگام
class ErrorBoundary extends Component {}
گرفتن خطاهای رندر (کلاس قدیمی)
<title>My Page</title>
بالابردن عنوان سند از یک کامپوننت
<meta name="description" content="..." />
رندر تگهای meta در head
<link rel="stylesheet" href="..." />
بالابردن یک لینک stylesheet
<Comp key={id} />
تغییر key برای remount یک کامپوننت
React.lazy(() => import('./Page.jsx'))
وارد کردن تنبل یک کامپوننت route
createPortal(node, container)
رندر در یک گره DOM متفاوت
{/* a comment */}
نوشتن یک توضیح درون JSX
cleanup return in useEffect
همیشه آزادسازی subscriptionها/timerها
هیچ موردی با «:q» مطابقت ندارد.
به کمک نیاز دارید؟
با این ابزار مشکلی پیدا کردید؟ به تیم ما اطلاع دهید.