ورقة React المرجعية
مرجع React 19 قابل للبحث والطباعة — المكوّنات، JSX، الـ hooks، واجهات Actions الجديدة، السياق، المراجع والأداء. مجانًا.
المكوّنات وJSX
12function 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 المتداخل عبر children prop
<input value={v} onChange={onChange} />
إدخال متحكَّم مربوط بالحالة
العرض والإعداد
10import { createRoot } from 'react-dom/client'
استيراد واجهة جذر العميل
createRoot(document.getElementById('root')).render(<App/>)
تركيب التطبيق في DOM
import { StrictMode } from 'react'
استيراد غلاف StrictMode
<StrictMode><App /></StrictMode>
إظهار العيوب أثناء التطوير
import { hydrateRoot } from 'react-dom/client'
استيراد واجهة الترطيب hydration
hydrateRoot(el, <App />)
ربط React بـ HTML الخادم
root.unmount()
تفكيك جذر مُركَّب
import App from './App.jsx'
استيراد مكوّن من وحدة
<App {...props} />
نشر كائن كـ props
export { Button, Card }
تصدير مكوّنات متعددة بالاسم
الحالة والتأثيرات
12const [count, setCount] = useState(0)
إعلان متغيّر حالة
setCount(c => c + 1)
التحديث من القيمة السابقة
setUser(u => ({ ...u, name }))
تحديث حالة كائن بشكل غير قابل للتغيير
useEffect(() => { run(); }, [dep])
تشغيل تأثير عند تغيّر الاعتماديات
useEffect(() => { /* once */ }, [])
تشغيل تأثير عند التركيب فقط
useEffect(() => () => cleanup(), [])
إرجاع دالة تنظيف
const ref = useRef(null)
الاحتفاظ بقيمة قابلة للتغيير عبر عمليات العرض
const [state, dispatch] = useReducer(r, init)
إدارة حالة معقّدة بـ reducer
const theme = useContext(ThemeContext)
قراءة أقرب قيمة سياق
const memo = useMemo(() => calc(a), [a])
حفظ حساب مكلف في الذاكرة
useLayoutEffect(() => {}, [])
التشغيل تزامنياً بعد التخطيط
useSyncExternalStore(sub, get)
الاشتراك في مخزن خارجي
خطّافات وواجهات React 19
12import { use } from 'react'
استيراد واجهة use الجديدة
const data = use(promise)
قراءة promise، يعلّق حتى الجاهزية
const theme = use(ThemeContext)
قراءة السياق، مسموح شرطياً
const [state, action, pending] = useActionState(fn, init)
تتبّع الحالة والإجراء والانتظار
const [opt, addOpt] = useOptimistic(state, reducer)
عرض قيمة متفائلة فوراً
const { pending } = useFormStatus()
قراءة حالة إرسال النموذج الأصل
const [isPending, startTransition] = useTransition()
وسم التحديثات كغير عاجلة
startTransition(async () => await save())
تشغيل Action غير متزامن في transition
const deferred = useDeferredValue(value)
تأجيل قيمة لإبقاء الواجهة مستجيبة
const id = useId()
توليد معرّف فريد ثابت
<title>Page title</title>
عرض البيانات الوصفية في أي مكان من الشجرة
function Input({ ref }) {}
ref هو prop عادي، بلا forwardRef
النماذج والإجراءات
12<form action={handleSubmit}>
تمرير دالة كـ Action للنموذج
function handleSubmit(formData) {}
الإجراء يستقبل FormData
formData.get('email')
قراءة حقل من FormData
const [state, action] = useActionState(submit, null)
ربط Action بحالة المكوّن
<form action={action}>
استخدام Action المغلّف على النموذج
const [s, a, pending] = useActionState(fn, init)
كشف راية انتظار للواجهة
return { error: 'Invalid' }
إرجاع حالة خطأ من Action
function Submit() { const { pending } = useFormStatus() }
قراءة الانتظار داخل زر الإرسال
<button disabled={pending}>Save</button>
تعطيل الإرسال أثناء الانتظار
import { requestFormReset } from 'react-dom'
استيراد مساعد إعادة ضبط النموذج
requestFormReset(formEl)
إعادة ضبط نموذج غير متحكَّم
<form action={action}><Submit /></form>
تأليف نموذج Action مع الحالة
الـ Props والتأليف
10function Hi({ name = 'Guest' }) {}
prop افتراضي عبر التفكيك
function Box({ children }) { return children; }
تغليف المحتوى بـ children prop
<Box><p>Inside</p></Box>
تمرير JSX كأبناء
function List({ render }) { return render(); }
نمط render prop
<List render={() => <Item />} />
توفير دالة عرض
<Input {...props} />
تمرير كل الـ props بالنشر
const { id, ...rest } = props
اختيار prop وتمرير الباقي
<Avatar {...rest} size="lg" />
النشر ثم تجاوز prop
function Btn(props: BtnProps) {}
تحديد أنواع الـ props بواجهات TypeScript
<Slot label={<b>Hi</b>} />
تمرير JSX عبر prop مسمّى
الأحداث
10<button onClick={handleClick}>
ربط معالج نقر
function handleClick(e) {}
استقبال الحدث الاصطناعي
<input onChange={e => set(e.target.value)} />
قراءة قيمة إدخال عند التغيّر
<form onSubmit={e => e.preventDefault()}>
إيقاف إرسال النموذج الافتراضي
e.stopPropagation()
منع الحدث من الانتشار للأعلى
<li onClick={() => remove(id)}>
تمرير الوسائط بإغلاق closure
<input onKeyDown={e => e.key === 'Enter'}
معالجة ضغط مفتاح محدد
<div onMouseEnter={hover}>
الاستماع لأحداث المؤشر
e.currentTarget.value
قراءة العنصر المرتبط به المعالج
<button onClick={() => {}} type="button">
تجنّب إرسال النموذج الضمني
القوائم والمفاتيح
10arr.map(x => <li key={x.id}>{x.t}</li>)
عرض عقدة واحدة لكل عنصر
key={item.id}
إعطاء كل عنصر مفتاحاً ثابتاً
key={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(...)}
التصفية قبل التعيين mapping
Keys must be unique among siblings
لماذا تساعد المفاتيح React في مقارنة القوائم
{[...Array(n)].map((_, i) => ...)}
تعيين نطاق ثابت الطول
السياق (Context)
10const ThemeContext = createContext('light')
إنشاء سياق بقيمة افتراضية
import { createContext } from 'react'
استيراد مصنع السياق
<ThemeContext value={theme}>
توفير قيمة (صيغة React 19)
<ThemeContext value={theme}><App /></ThemeContext>
تغليف الشجرة التي تقرأه
const theme = useContext(ThemeContext)
قراءة السياق بـ useContext
const theme = use(ThemeContext)
قراءة السياق بواجهة use
if (cond) { const t = use(Ctx); }
use يمكنه قراءة السياق شرطياً
export const ThemeContext = createContext()
تصدير سياق مشترك
<Ctx value={{ user, setUser }}>
تمرير كائن كقيمة
Avoid new objects each render
حفظ القيم في الذاكرة للحد من إعادة العرض
المراجع (Refs)
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 }))
كشف واجهة أمرية
const setRef = node => { box = node; }
استخدام ref برد نداء
<div ref={setRef} />
ربط ref برد نداء
const count = useRef(0)
تخزين قيمة دون إعادة عرض
ref={node => { return () => cleanup(); }}
ref برد نداء مع تنظيف (React 19)
الأداء
10const 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'))
تقسيم شيفرة مكوّن
import { lazy, Suspense } from 'react'
استيراد lazy وSuspense
<Suspense fallback={<Spin />}><Lazy /></Suspense>
عرض احتياطي أثناء التحميل
startTransition(() => setQuery(q))
وسم تحديثات الحالة غير العاجلة
const slow = useDeferredValue(query)
تأجيل واجهة مشتقّة مكلفة
React Compiler auto-memoizes
غالباً يلغي الحفظ اليدوي في الذاكرة
متفرقات وبيانات وصفية
10<Suspense fallback={<Loading />}>
حدّ للمحتوى غير المتزامن
class ErrorBoundary extends Component {}
التقاط أخطاء العرض (صنف قديم)
<title>My Page</title>
رفع عنوان المستند من مكوّن
<meta name="description" content="..." />
عرض وسوم meta في head
<link rel="stylesheet" href="..." />
رفع رابط صفحة أنماط
<Comp key={id} />
تغيير المفتاح لإعادة تركيب مكوّن
React.lazy(() => import('./Page.jsx'))
استيراد مكوّن مسار بكسل lazy
createPortal(node, container)
العرض في عقدة DOM مختلفة
{/* a comment */}
كتابة تعليق داخل JSX
cleanup return in useEffect
حرّر الاشتراكات/المؤقتات دائماً
لا يوجد إدخال يطابق “:q”.
هل تحتاج إلى مساعدة؟
هل واجهت مشكلة في هذه الأداة؟ أخبر فريقنا.