Helaian Rujukan React
Rujukan React 19 yang boleh dicari dan dicetak — komponen, JSX, hook, API Actions baharu, context, ref, dan prestasi. Percuma.
Komponen & JSX
12function App() { return <h1>Hi</h1>; }
Komponen fungsi yang memulangkan JSX
export default function App() {}
Default-export sesuatu komponen
<Greeting name="Ada" />
Persembahkan komponen dengan props
{1 + 2} or {user.name}
Benamkan ungkapan JS dengan kurungan dakap
<>{a}{b}</>
Fragment mengumpul nod, tiada DOM tambahan
<div className="card">
Guna className, bukan class, untuk CSS
{isOpen && <Menu />}
Persembahkan secara bersyarat dengan &&
{ok ? <Yes /> : <No />}
Pilih antara nod dengan ternary
{items.map(i => <li key={i.id}>{i.t}</li>)}
Persembahkan senarai dari tatasusunan
function Btn({ label, onClick }) {}
Destruktur props dalam tandatangan
function Card({ children }) { return children; }
Baca JSX bersarang melalui prop children
<input value={v} onChange={onChange} />
Input terkawal terikat pada state
Persembahan & persediaan
10import { createRoot } from 'react-dom/client'
Import API root klien
createRoot(document.getElementById('root')).render(<App/>)
Lekapkan apl ke dalam DOM
import { StrictMode } from 'react'
Import pembalut StrictMode
<StrictMode><App /></StrictMode>
Dedahkan pepijat semasa pembangunan
import { hydrateRoot } from 'react-dom/client'
Import API hidrasi
hydrateRoot(el, <App />)
Lampirkan React pada HTML pelayan
root.unmount()
Robohkan root terlekap
import App from './App.jsx'
Import komponen dari modul
<App {...props} />
Sebarkan objek sebagai props
export { Button, Card }
Named-export berbilang komponen
State & effect
12const [count, setCount] = useState(0)
Isytihar pemboleh ubah state
setCount(c => c + 1)
Kemas kini dari nilai sebelumnya
setUser(u => ({ ...u, name }))
Kemas kini state objek secara tak boleh ubah
useEffect(() => { run(); }, [dep])
Jalankan effect apabila deps berubah
useEffect(() => { /* once */ }, [])
Jalankan effect hanya semasa mount
useEffect(() => () => cleanup(), [])
Pulangkan fungsi pembersihan
const ref = useRef(null)
Simpan nilai boleh ubah merentas render
const [state, dispatch] = useReducer(r, init)
Urus state kompleks dengan reducer
const theme = useContext(ThemeContext)
Baca nilai context terdekat
const memo = useMemo(() => calc(a), [a])
Memoize pengiraan mahal
useLayoutEffect(() => {}, [])
Jalankan secara segerak selepas layout
useSyncExternalStore(sub, get)
Langgan store luaran
Hook & API React 19
12import { use } from 'react'
Import API use baharu
const data = use(promise)
Baca promise, tergantung sehingga sedia
const theme = use(ThemeContext)
Baca context, dibenarkan secara bersyarat
const [state, action, pending] = useActionState(fn, init)
Jejak state, action dan pending
const [opt, addOpt] = useOptimistic(state, reducer)
Papar nilai optimistik serta-merta
const { pending } = useFormStatus()
Baca status submit borang induk
const [isPending, startTransition] = useTransition()
Tanda kemas kini sebagai tidak mendesak
startTransition(async () => await save())
Jalankan Action async dalam transition
const deferred = useDeferredValue(value)
Tangguhkan nilai untuk kekalkan UI responsif
const id = useId()
Jana id unik stabil
<title>Page title</title>
Persembahkan metadata di mana-mana dalam tree
function Input({ ref }) {}
ref ialah prop biasa, tiada forwardRef
Borang & Action
12<form action={handleSubmit}>
Hantar fungsi sebagai Action borang
function handleSubmit(formData) {}
Action menerima FormData
formData.get('email')
Baca medan dari FormData
const [state, action] = useActionState(submit, null)
Wayar Action ke state komponen
<form action={action}>
Guna Action terbungkus pada borang
const [s, a, pending] = useActionState(fn, init)
Dedahkan bendera pending untuk UI
return { error: 'Invalid' }
Pulangkan state ralat dari Action
function Submit() { const { pending } = useFormStatus() }
Baca pending dalam butang submit
<button disabled={pending}>Save</button>
Lumpuhkan submit semasa pending
import { requestFormReset } from 'react-dom'
Import pembantu reset borang
requestFormReset(formEl)
Tetap semula borang tak terkawal
<form action={action}><Submit /></form>
Gubah borang Action dengan status
Props & gubahan
10function Hi({ name = 'Guest' }) {}
Prop lalai melalui destruktur
function Box({ children }) { return children; }
Bungkus kandungan dengan prop children
<Box><p>Inside</p></Box>
Hantar JSX sebagai children
function List({ render }) { return render(); }
Corak render prop
<List render={() => <Item />} />
Sediakan fungsi render
<Input {...props} />
Hantar hadapan semua props dengan spread
const { id, ...rest } = props
Pilih satu prop dan hantar selebihnya
<Avatar {...rest} size="lg" />
Sebarkan kemudian ganti satu prop
function Btn(props: BtnProps) {}
Taipkan props dengan antara muka TypeScript
<Slot label={<b>Hi</b>} />
Hantar JSX melalui prop bernama
Peristiwa
10<button onClick={handleClick}>
Lampirkan pengendali klik
function handleClick(e) {}
Terima peristiwa sintetik
<input onChange={e => set(e.target.value)} />
Baca nilai input semasa berubah
<form onSubmit={e => e.preventDefault()}>
Hentikan submit borang lalai
e.stopPropagation()
Halang peristiwa daripada menggelembung
<li onClick={() => remove(id)}>
Hantar argumen dengan closure
<input onKeyDown={e => e.key === 'Enter'}
Kendalikan tekanan kekunci tertentu
<div onMouseEnter={hover}>
Dengar peristiwa pointer
e.currentTarget.value
Baca elemen tempat pengendali berada
<button onClick={() => {}} type="button">
Elak penghantaran borang tersirat
Senarai & kunci
10arr.map(x => <li key={x.id}>{x.t}</li>)
Persembahkan satu nod setiap item
key={item.id}
Beri setiap item kunci stabil
key={index}
Kunci indeks untuk senarai statik sahaja
users.map(u => <Card key={u.id} {...u} />)
Sebarkan medan item sebagai props
{list.length === 0 && <Empty />}
Papar sandaran untuk senarai kosong
import { Fragment } from 'react'
Import Fragment untuk kumpulan berkunci
<Fragment key={id}>{a}{b}</Fragment>
Fragment berkunci dalam senarai
{rows.filter(r => r.on).map(...)}
Tapis sebelum memetakan
Keys must be unique among siblings
Mengapa kunci membantu React membezakan senarai
{[...Array(n)].map((_, i) => ...)}
Petakan julat panjang tetap
Context
10const ThemeContext = createContext('light')
Cipta context dengan nilai lalai
import { createContext } from 'react'
Import kilang context
<ThemeContext value={theme}>
Sediakan nilai (sintaks React 19)
<ThemeContext value={theme}><App /></ThemeContext>
Bungkus tree yang membacanya
const theme = useContext(ThemeContext)
Baca context dengan useContext
const theme = use(ThemeContext)
Baca context dengan API use
if (cond) { const t = use(Ctx); }
use boleh baca context secara bersyarat
export const ThemeContext = createContext()
Eksport context dikongsi
<Ctx value={{ user, setUser }}>
Hantar objek sebagai nilai
Avoid new objects each render
Memoize nilai untuk hadkan render semula
Ref
10const inputRef = useRef(null)
Cipta pemegang ref
<input ref={inputRef} />
Lampirkan ref pada nod
inputRef.current.focus()
Akses nod DOM melalui current
function Field({ ref }) { return <input ref={ref} /> }
ref sebagai prop, tiada forwardRef
<Field ref={inputRef} />
Hantar ref ke komponen
useImperativeHandle(ref, () => ({ focus }))
Dedahkan API imperatif
const setRef = node => { box = node; }
Guna callback ref
<div ref={setRef} />
Lampirkan callback ref
const count = useRef(0)
Simpan nilai tanpa render semula
ref={node => { return () => cleanup(); }}
Callback ref dengan pembersihan (React 19)
Prestasi
10const Memo = memo(Component)
Langkau render semula apabila props sama
import { memo } from 'react'
Import pembantu memo
const value = useMemo(() => calc(a), [a])
Cache nilai dikira
const fn = useCallback(() => f(a), [a])
Cache identiti fungsi
const Lazy = lazy(() => import('./Big.jsx'))
Code-split sesuatu komponen
import { lazy, Suspense } from 'react'
Import lazy dan Suspense
<Suspense fallback={<Spin />}><Lazy /></Suspense>
Papar sandaran semasa memuat
startTransition(() => setQuery(q))
Tanda kemas kini state tidak mendesak
const slow = useDeferredValue(query)
Tangguhkan UI terbitan mahal
React Compiler auto-memoizes
Selalunya menghapuskan memoisasi manual
Lain-lain & metadata
10<Suspense fallback={<Loading />}>
Sempadan untuk kandungan async
class ErrorBoundary extends Component {}
Tangkap ralat render (kelas lama)
<title>My Page</title>
Angkat tajuk dokumen dari komponen
<meta name="description" content="..." />
Persembahkan tag meta ke dalam head
<link rel="stylesheet" href="..." />
Angkat pautan stylesheet
<Comp key={id} />
Tukar key untuk lekap semula komponen
React.lazy(() => import('./Page.jsx'))
Import komponen route secara lazy
createPortal(node, container)
Persembahkan ke nod DOM berbeza
{/* a comment */}
Tulis komen dalam JSX
cleanup return in useEffect
Sentiasa lepaskan langganan/pemasa
Tiada entri sepadan dengan “:q”.
Perlukan bantuan?
Menemui masalah dengan alat ini? Beritahu pasukan kami.