React 速查表

所有工具

免費

可搜尋、可列印的 React 19 參考手冊——元件、JSX、Hooks、全新的 Actions API、context、refs 以及效能最佳化。免費。

Components & JSX

function App() { return <h1>Hi</h1>; }

A function component returning JSX

export default function App() {}

Default-export a component

<Greeting name="Ada" />

Render a component with props

{1 + 2} or {user.name}

Embed a JS expression with braces

<>{a}{b}</>

Fragment groups nodes, no extra DOM

<div className="card">

Use className, not class, for CSS

{isOpen && <Menu />}

Render conditionally with &&

{ok ? <Yes /> : <No />}

Choose between nodes with a ternary

{items.map(i => <li key={i.id}>{i.t}</li>)}

Render a list from an array

function Btn({ label, onClick }) {}

Destructure props in the signature

function Card({ children }) { return children; }

Read nested JSX via the children prop

<input value={v} onChange={onChange} />

Controlled input bound to state

Rendering & setup

import { createRoot } from 'react-dom/client'

Import the client root API

createRoot(document.getElementById('root')).render(<App/>)

Mount the app into the DOM

import { StrictMode } from 'react'

Import StrictMode wrapper

<StrictMode><App /></StrictMode>

Surface bugs in development

import { hydrateRoot } from 'react-dom/client'

Import the hydration API

hydrateRoot(el, <App />)

Attach React to server HTML

root.unmount()

Tear down a mounted root

import App from './App.jsx'

Import a component from a module

<App {...props} />

Spread an object as props

export { Button, Card }

Named-export multiple components

State & effects

const [count, setCount] = useState(0)

Declare a state variable

setCount(c => c + 1)

Update from the previous value

setUser(u => ({ ...u, name }))

Update object state immutably

useEffect(() => { run(); }, [dep])

Run an effect when deps change

useEffect(() => { /* once */ }, [])

Run an effect only on mount

useEffect(() => () => cleanup(), [])

Return a cleanup function

const ref = useRef(null)

Hold a mutable value across renders

const [state, dispatch] = useReducer(r, init)

Manage complex state with a reducer

const theme = useContext(ThemeContext)

Read the nearest context value

const memo = useMemo(() => calc(a), [a])

Memoize an expensive computation

useLayoutEffect(() => {}, [])

Run synchronously after layout

useSyncExternalStore(sub, get)

Subscribe to an external store

React 19 hooks & APIs

import { use } from 'react'

Import the new use API

const data = use(promise)

Read a promise, suspends until ready

const theme = use(ThemeContext)

Read context, allowed conditionally

const [state, action, pending] = useActionState(fn, init)

Track state, action and pending

const [opt, addOpt] = useOptimistic(state, reducer)

Show an optimistic value instantly

const { pending } = useFormStatus()

Read the parent form submit status

const [isPending, startTransition] = useTransition()

Mark updates as non-urgent

startTransition(async () => await save())

Run an async Action in a transition

const deferred = useDeferredValue(value)

Defer a value to keep UI responsive

const id = useId()

Generate a stable unique id

<title>Page title</title>

Render metadata anywhere in the tree

function Input({ ref }) {}

ref is a normal prop, no forwardRef

Forms & Actions

<form action={handleSubmit}>

Pass a function as a form Action

function handleSubmit(formData) {}

Action receives the FormData

formData.get('email')

Read a field from FormData

const [state, action] = useActionState(submit, null)

Wire an Action to component state

<form action={action}>

Use the wrapped Action on the form

const [s, a, pending] = useActionState(fn, init)

Expose a pending flag for the UI

return { error: 'Invalid' }

Return error state from an Action

function Submit() { const { pending } = useFormStatus() }

Read pending inside the submit button

<button disabled={pending}>Save</button>

Disable submit while pending

import { requestFormReset } from 'react-dom'

Import the form reset helper

requestFormReset(formEl)

Reset an uncontrolled form

<form action={action}><Submit /></form>

Compose Action form with status

Props & composition

function Hi({ name = 'Guest' }) {}

Default prop via destructuring

function Box({ children }) { return children; }

Wrap content with the children prop

<Box><p>Inside</p></Box>

Pass JSX as children

function List({ render }) { return render(); }

Render prop pattern

<List render={() => <Item />} />

Provide a render function

<Input {...props} />

Forward all props with spread

const { id, ...rest } = props

Pick a prop and pass the rest

<Avatar {...rest} size="lg" />

Spread then override a prop

function Btn(props: BtnProps) {}

Type props with TypeScript interfaces

<Slot label={<b>Hi</b>} />

Pass JSX through a named prop

Events

<button onClick={handleClick}>

Attach a click handler

function handleClick(e) {}

Receive the synthetic event

<input onChange={e => set(e.target.value)} />

Read an input value on change

<form onSubmit={e => e.preventDefault()}>

Stop the default form submit

e.stopPropagation()

Prevent the event from bubbling

<li onClick={() => remove(id)}>

Pass arguments with a closure

<input onKeyDown={e => e.key === 'Enter'}

Handle a specific key press

<div onMouseEnter={hover}>

Listen for pointer events

e.currentTarget.value

Read the element the handler is on

<button onClick={() => {}} type="button">

Avoid implicit form submission

Lists & keys

arr.map(x => <li key={x.id}>{x.t}</li>)

Render one node per item

key={item.id}

Give each item a stable key

key={index}

Index keys only for static lists

users.map(u => <Card key={u.id} {...u} />)

Spread item fields as props

{list.length === 0 && <Empty />}

Show a fallback for empty lists

import { Fragment } from 'react'

Import Fragment for keyed groups

<Fragment key={id}>{a}{b}</Fragment>

A keyed fragment in a list

{rows.filter(r => r.on).map(...)}

Filter before mapping

Keys must be unique among siblings

Why keys help React diff lists

{[...Array(n)].map((_, i) => ...)}

Map a fixed-length range

Context

const ThemeContext = createContext('light')

Create a context with a default

import { createContext } from 'react'

Import the context factory

<ThemeContext value={theme}>

Provide a value (React 19 syntax)

<ThemeContext value={theme}><App /></ThemeContext>

Wrap the tree that reads it

const theme = useContext(ThemeContext)

Read context with useContext

const theme = use(ThemeContext)

Read context with the use API

if (cond) { const t = use(Ctx); }

use can read context conditionally

export const ThemeContext = createContext()

Export a shared context

<Ctx value={{ user, setUser }}>

Pass an object as the value

Avoid new objects each render

Memoize values to limit re-renders

Refs

const inputRef = useRef(null)

Create a ref holder

<input ref={inputRef} />

Attach the ref to a node

inputRef.current.focus()

Access the DOM node via current

function Field({ ref }) { return <input ref={ref} /> }

ref as a prop, no forwardRef

<Field ref={inputRef} />

Pass a ref to a component

useImperativeHandle(ref, () => ({ focus }))

Expose an imperative API

const setRef = node => { box = node; }

Use a callback ref

<div ref={setRef} />

Attach a callback ref

const count = useRef(0)

Store a value without re-rendering

ref={node => { return () => cleanup(); }}

Callback ref with cleanup (React 19)

Performance

const Memo = memo(Component)

Skip re-render when props are equal

import { memo } from 'react'

Import the memo helper

const value = useMemo(() => calc(a), [a])

Cache a computed value

const fn = useCallback(() => f(a), [a])

Cache a function identity

const Lazy = lazy(() => import('./Big.jsx'))

Code-split a component

import { lazy, Suspense } from 'react'

Import lazy and Suspense

<Suspense fallback={<Spin />}><Lazy /></Suspense>

Show a fallback while loading

startTransition(() => setQuery(q))

Mark non-urgent state updates

const slow = useDeferredValue(query)

Defer expensive derived UI

React Compiler auto-memoizes

Often removes manual memoization

Misc & metadata

<Suspense fallback={<Loading />}>

Boundary for async content

class ErrorBoundary extends Component {}

Catch render errors (legacy class)

<title>My Page</title>

Hoist document title from a component

<meta name="description" content="..." />

Render meta tags into the head

<link rel="stylesheet" href="..." />

Hoist a stylesheet link

<Comp key={id} />

Change key to remount a component

React.lazy(() => import('./Page.jsx'))

Lazily import a route component

createPortal(node, container)

Render into a different DOM node

{/* a comment */}

Write a comment inside JSX

cleanup return in useEffect

Always release subscriptions/timers

沒有條目符合「:q」。

關於 React 速查表

這份 React 速查表鎖定 React 19,依概念整理整個函式庫:元件與 JSX、渲染與設定、狀態與副作用、React 19 的 Hooks 與 API、表單與 Actions、Props 與組合、事件、清單與 key、Context、Refs、效能,以及中繼資料與其他雜項。

內容同時涵蓋你在每個元件都會用到的基礎——useState、useEffect、props、key、受控輸入元件——以及較新的 React 19 新增功能,包括以 Actions 為基礎的表單模式,因此它既能當複習資料,也能作為銜接現行 API 的橋樑。

這份速查表完全免費且在用戶端運作。用搜尋框即時篩選 Hooks 與模式,透過置頂目錄在各區段間跳轉,一鍵複製任何片段,還可以列印出來,在建置元件時隨手參考。

如何使用 React 速查表

瀏覽各個區段,從「元件與 JSX」「狀態與副作用」到「React 19 的 Hooks 與 API」與「效能」。
搜尋像 useEffect、key 或 context 這類 Hook 或概念,即時篩選速查表。
需要特定寫法時,透過置頂側邊欄跳轉到「表單與 Actions」或「Refs」。
點擊程式碼片段或其複製圖示,即可將程式碼複製到你的元件中。
列印這份速查表,作為離線的 React 參考。

常見問題

是的。除了長期沿用的基礎內容外,還有專門的「React 19 的 Hooks 與 API」區段,以及一個以較新 Actions 模式為核心的表單區段。

共十二個區段:元件與 JSX、渲染與設定、狀態與副作用、React 19 的 Hooks 與 API、表單與 Actions、Props 與組合、事件、清單與 key、Context、Refs、效能,以及中繼資料與其他雜項。

有。狀態與副作用區段展示 useState 與 useEffect 的用法及常見變化,而 Context、Refs 與效能區段則分別涵蓋各自對應的 Hooks。

可以。點擊任何程式碼片段或滑鼠懸停時出現的複製圖示,就會複製到剪貼簿並顯示簡短的確認提示。

是的,完全免費——可搜尋、可列印,直接在瀏覽器中渲染,無需註冊。

React 速查表

Components & JSX

Rendering & setup

State & effects

React 19 hooks & APIs

Forms & Actions

Props & composition

Events

Lists & keys

Context

Refs

Performance

Misc & metadata

關於 React 速查表

如何使用 React 速查表

常見問題

這份速查表是否適用於 React 19?

涵蓋哪些主題?

有涵蓋核心 Hooks 嗎?

可以一鍵複製程式碼片段嗎?

這份 React 參考表是免費的嗎?

相關工具

熱門搜尋

嵌入此工具