React 速查表
可搜尋、可列印的 React 19 參考手冊——元件、JSX、Hooks、全新的 Actions API、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">
CSS 用 className 而非 class
{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; }
透過 children prop 讀取巢狀 JSX
<input value={v} onChange={onChange} />
繫結至 state 的受控輸入
渲染與設定
10import { createRoot } from 'react-dom/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 與 effect
12const [count, setCount] = useState(0)
宣告 state 變數
setCount(c => c + 1)
依前一個值更新
setUser(u => ({ ...u, name }))
以不可變方式更新物件 state
useEffect(() => { run(); }, [dep])
相依項變更時執行 effect
useEffect(() => { /* once */ }, [])
僅在掛載時執行 effect
useEffect(() => () => cleanup(), [])
回傳清理函式
const ref = useRef(null)
跨渲染保存可變值
const [state, dispatch] = useReducer(r, init)
以 reducer 管理複雜 state
const theme = useContext(ThemeContext)
讀取最近的 context 值
const memo = useMemo(() => calc(a), [a])
記憶化昂貴的運算
useLayoutEffect(() => {}, [])
在版面後同步執行
useSyncExternalStore(sub, get)
訂閱外部 store
React 19 hook 與 API
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)
即時顯示樂觀更新值
const { pending } = useFormStatus()
讀取父表單的送出狀態
const [isPending, startTransition] = useTransition()
將更新標記為非緊急
startTransition(async () => await save())
在 transition 中執行非同步 Action
const deferred = useDeferredValue(value)
延遲值以維持 UI 回應性
const id = useId()
產生穩定的唯一 id
<title>Page title</title>
在樹中任意處渲染中繼資料
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)
為 UI 提供 pending 旗標
return { error: 'Invalid' }
從 Action 回傳錯誤 state
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 預設值
function Box({ children }) { return children; }
以 children prop 包裹內容
<Box><p>Inside</p></Box>
將 JSX 作為 children 傳入
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) {}
以 TypeScript 介面定義 props 型別
<Slot label={<b>Hi</b>} />
透過具名 prop 傳遞 JSX
事件
10<button onClick={handleClick}>
附加 click 處理器
function handleClick(e) {}
接收合成事件
<input onChange={e => set(e.target.value)} />
在 change 時讀取輸入值
<form onSubmit={e => e.preventDefault()}>
阻止表單預設送出
e.stopPropagation()
阻止事件冒泡
<li onClick={() => remove(id)}>
以閉包傳遞引數
<input onKeyDown={e => e.key === 'Enter'}
處理特定按鍵
<div onMouseEnter={hover}>
監聽指標事件
e.currentTarget.value
讀取處理器所在的元素
<button onClick={() => {}} type="button">
避免隱含的表單送出
清單與 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} />)
將項目欄位展開為 props
{list.length === 0 && <Empty />}
為空清單顯示後備內容
import { Fragment } from 'react'
為帶 key 的群組匯入 Fragment
<Fragment key={id}>{a}{b}</Fragment>
清單中帶 key 的 fragment
{rows.filter(r => r.on).map(...)}
在 map 之前先篩選
Keys must be unique among siblings
key 為何有助 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)
以 useContext 讀取 context
const theme = use(ThemeContext)
以 use API 讀取 context
if (cond) { const t = use(Ctx); }
use 可有條件地讀取 context
export const ThemeContext = createContext()
匯出共用的 context
<Ctx value={{ user, setUser }}>
傳入物件作為值
Avoid new objects each render
記憶化值以限制重新渲染
Ref
10const inputRef = useRef(null)
建立 ref 持有者
<input ref={inputRef} />
將 ref 附加到節點
inputRef.current.focus()
透過 current 存取 DOM 節點
function Field({ ref }) { return <input ref={ref} /> }
ref 作為 prop，免用 forwardRef
<Field ref={inputRef} />
將 ref 傳給元件
useImperativeHandle(ref, () => ({ focus }))
提供命令式 API
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))
標記非緊急的 state 更新
const slow = useDeferredValue(query)
延遲昂貴的衍生 UI
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} />
變更 key 以重新掛載元件
React.lazy(() => import('./Page.jsx'))
延遲匯入路由元件
createPortal(node, container)
渲染到不同的 DOM 節點
{/* a comment */}
在 JSX 內撰寫註解
cleanup return in useEffect
務必釋放訂閱/計時器
沒有條目符合「:q」。
需要協助？
使用此工具時遇到問題？請告訴我們的團隊。