דף עזר React
מדריך React 19 לחיפוש והדפסה — רכיבים, JSX, hooks, ממשקי Actions החדשים, context, refs וביצועים. בחינם.
רכיבים ו-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 />}
בחירה בין צמתים עם ternary
{items.map(i => <li key={i.id}>{i.t}</li>)}
רינדור רשימה ממערך
function Btn({ label, onClick }) {}
פירוק props בחתימה
function Card({ children }) { return children; }
קריאת JSX מקונן דרך prop ה-children
<input value={v} onChange={onChange} />
קלט מבוקר הקשור ל-state
רינדור והקמה
10import { createRoot } from 'react-dom/client'
ייבוא API השורש של ה-client
createRoot(document.getElementById('root')).render(<App/>)
עיגון האפליקציה לתוך ה-DOM
import { StrictMode } from 'react'
ייבוא העוטף StrictMode
<StrictMode><App /></StrictMode>
חשיפת באגים בפיתוח
import { hydrateRoot } from 'react-dom/client'
ייבוא API ה-hydration
hydrateRoot(el, <App />)
חיבור React ל-HTML של השרת
root.unmount()
פירוק root מעוגן
import App from './App.jsx'
ייבוא רכיב ממודול
<App {...props} />
פיזור אובייקט כ-props
export { Button, Card }
ייצוא בעל שם של מספר רכיבים
state ו-effects
12const [count, setCount] = useState(0)
הצהרה על משתנה state
setCount(c => c + 1)
עדכון מהערך הקודם
setUser(u => ({ ...u, name }))
עדכון state של אובייקט באופן בלתי-משתנה
useEffect(() => { run(); }, [dep])
הרצת effect כשה-deps משתנים
useEffect(() => { /* once */ }, [])
הרצת effect רק ב-mount
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])
memoize של חישוב יקר
useLayoutEffect(() => {}, [])
הרצה סינכרונית לאחר layout
useSyncExternalStore(sub, get)
הרשמה ל-store חיצוני
hooks ו-APIs של React 19
12import { use } from 'react'
ייבוא API ה-use החדש
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()
קריאת סטטוס שליחת טופס האב
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
טפסים ו-Actions
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 בתוך כפתור השליחה
<button disabled={pending}>Save</button>
השבתת שליחה בזמן pending
import { requestFormReset } from 'react-dom'
ייבוא מסייע איפוס הטופס
requestFormReset(formEl)
איפוס טופס לא-מבוקר
<form action={action}><Submit /></form>
הרכבת טופס Action עם סטטוס
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} />
העברת כל ה-props עם spread
const { id, ...rest } = props
בחירת prop והעברת השאר
<Avatar {...rest} size="lg" />
spread ולאחר מכן דריסת prop
function Btn(props: BtnProps) {}
טיפוס props עם interfaces של 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}>
האזנה לאירועי pointer
e.currentTarget.value
קריאת האלמנט שעליו נמצא המטפל
<button onClick={() => {}} type="button">
הימנעות משליחת טופס מרומזת
רשימות ו-keys
10arr.map(x => <li key={x.id}>{x.t}</li>)
רינדור צומת אחד לכל פריט
key={item.id}
מתן key יציב לכל פריט
key={index}
keys לפי אינדקס רק לרשימות סטטיות
users.map(u => <Card key={u.id} {...u} />)
פיזור שדות פריט כ-props
{list.length === 0 && <Empty />}
הצגת ברירת מחדל לרשימות ריקות
import { Fragment } from 'react'
ייבוא Fragment לקבוצות עם key
<Fragment key={id}>{a}{b}</Fragment>
fragment עם key ברשימה
{rows.filter(r => r.on).map(...)}
סינון לפני mapping
Keys must be unique among siblings
מדוע keys עוזרים ל-React להשוות רשימות
{[...Array(n)].map((_, i) => ...)}
מיפוי טווח באורך קבוע
context
10const ThemeContext = createContext('light')
יצירת context עם ברירת מחדל
import { createContext } from 'react'
ייבוא ה-factory של ה-context
<ThemeContext value={theme}>
אספקת ערך (תחביר React 19)
<ThemeContext value={theme}><App /></ThemeContext>
עטיפת העץ שקורא אותו
const theme = useContext(ThemeContext)
קריאת context עם useContext
const theme = use(ThemeContext)
קריאת context עם API ה-use
if (cond) { const t = use(Ctx); }
use יכול לקרוא context באופן מותנה
export const ThemeContext = createContext()
ייצוא context משותף
<Ctx value={{ user, setUser }}>
העברת אובייקט כערך
Avoid new objects each render
memoize של ערכים להגבלת רינדורים מחדש
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 }))
חשיפת 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)
ביצועים
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))
סימון עדכוני 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 לעיגון מחדש של רכיב
React.lazy(() => import('./Page.jsx'))
ייבוא עצל של רכיב route
createPortal(node, container)
רינדור לתוך צומת DOM אחר
{/* a comment */}
כתיבת הערה בתוך JSX
cleanup return in useEffect
שחרור תמיד של subscriptions/timers
אף רשומה אינה תואמת ל-„:q”.
צריך עזרה?
נתקלת בבעיה בכלי הזה? ספר לצוות שלנו.