Tài liệu tham khảo nhanh React
Tài liệu tham khảo React 19 có thể tìm kiếm và in được — component, JSX, hook, API Actions mới, context, ref và hiệu suất. Miễn phí.
Thành phần & JSX
12function App() { return <h1>Hi</h1>; }
Một function component trả về JSX
export default function App() {}
Default-export một thành phần
<Greeting name="Ada" />
Render một thành phần với props
{1 + 2} or {user.name}
Nhúng một biểu thức JS với dấu ngoặc nhọn
<>{a}{b}</>
Fragment nhóm các node, không thêm DOM
<div className="card">
Dùng className, không phải class, cho CSS
{isOpen && <Menu />}
Render có điều kiện với &&
{ok ? <Yes /> : <No />}
Chọn giữa các node bằng toán tử ba ngôi
{items.map(i => <li key={i.id}>{i.t}</li>)}
Render một danh sách từ một mảng
function Btn({ label, onClick }) {}
Phá cấu trúc props trong chữ ký hàm
function Card({ children }) { return children; }
Đọc JSX lồng qua prop children
<input value={v} onChange={onChange} />
Input có kiểm soát gắn với state
Render & thiết lập
10import { createRoot } from 'react-dom/client'
Nhập API root phía client
createRoot(document.getElementById('root')).render(<App/>)
Gắn ứng dụng vào DOM
import { StrictMode } from 'react'
Nhập vỏ bọc StrictMode
<StrictMode><App /></StrictMode>
Phơi bày lỗi khi phát triển
import { hydrateRoot } from 'react-dom/client'
Nhập API hydration
hydrateRoot(el, <App />)
Gắn React vào HTML từ server
root.unmount()
Tháo dỡ một root đã gắn
import App from './App.jsx'
Nhập một thành phần từ một module
<App {...props} />
Trải một đối tượng thành props
export { Button, Card }
Named-export nhiều thành phần
State & effect
12const [count, setCount] = useState(0)
Khai báo một biến state
setCount(c => c + 1)
Cập nhật từ giá trị trước đó
setUser(u => ({ ...u, name }))
Cập nhật state đối tượng bất biến
useEffect(() => { run(); }, [dep])
Chạy một effect khi deps thay đổi
useEffect(() => { /* once */ }, [])
Chạy một effect chỉ khi mount
useEffect(() => () => cleanup(), [])
Trả về một hàm dọn dẹp
const ref = useRef(null)
Giữ một giá trị thay đổi được qua các lần render
const [state, dispatch] = useReducer(r, init)
Quản lý state phức tạp với một reducer
const theme = useContext(ThemeContext)
Đọc giá trị context gần nhất
const memo = useMemo(() => calc(a), [a])
Memo hóa một phép tính tốn kém
useLayoutEffect(() => {}, [])
Chạy đồng bộ sau layout
useSyncExternalStore(sub, get)
Đăng ký một store bên ngoài
Hook & API React 19
12import { use } from 'react'
Nhập API use mới
const data = use(promise)
Đọc một promise, tạm dừng cho tới khi sẵn sàng
const theme = use(ThemeContext)
Đọc context, được phép có điều kiện
const [state, action, pending] = useActionState(fn, init)
Theo dõi state, action và trạng thái chờ
const [opt, addOpt] = useOptimistic(state, reducer)
Hiển thị một giá trị lạc quan tức thì
const { pending } = useFormStatus()
Đọc trạng thái submit của form cha
const [isPending, startTransition] = useTransition()
Đánh dấu cập nhật là không khẩn cấp
startTransition(async () => await save())
Chạy một Action bất đồng bộ trong một transition
const deferred = useDeferredValue(value)
Trì hoãn một giá trị để giữ UI mượt
const id = useId()
Sinh một id duy nhất ổn định
<title>Page title</title>
Render metadata ở bất kỳ đâu trong cây
function Input({ ref }) {}
ref là một prop thường, không cần forwardRef
Form & Action
12<form action={handleSubmit}>
Truyền một hàm làm Action của form
function handleSubmit(formData) {}
Action nhận FormData
formData.get('email')
Đọc một trường từ FormData
const [state, action] = useActionState(submit, null)
Nối một Action với state thành phần
<form action={action}>
Dùng Action đã bọc trên form
const [s, a, pending] = useActionState(fn, init)
Phơi bày một cờ chờ cho UI
return { error: 'Invalid' }
Trả về state lỗi từ một Action
function Submit() { const { pending } = useFormStatus() }
Đọc trạng thái chờ trong nút submit
<button disabled={pending}>Save</button>
Vô hiệu submit khi đang chờ
import { requestFormReset } from 'react-dom'
Nhập tiện ích reset form
requestFormReset(formEl)
Reset một form không kiểm soát
<form action={action}><Submit /></form>
Kết hợp form Action với trạng thái
Props & kết hợp
10function Hi({ name = 'Guest' }) {}
Prop mặc định qua phá cấu trúc
function Box({ children }) { return children; }
Bọc nội dung bằng prop children
<Box><p>Inside</p></Box>
Truyền JSX làm children
function List({ render }) { return render(); }
Mẫu render prop
<List render={() => <Item />} />
Cung cấp một hàm render
<Input {...props} />
Chuyển tiếp mọi props bằng spread
const { id, ...rest } = props
Chọn một prop và truyền phần còn lại
<Avatar {...rest} size="lg" />
Spread rồi ghi đè một prop
function Btn(props: BtnProps) {}
Định kiểu props bằng interface TypeScript
<Slot label={<b>Hi</b>} />
Truyền JSX qua một prop có tên
Sự kiện
10<button onClick={handleClick}>
Gắn một trình xử lý click
function handleClick(e) {}
Nhận sự kiện tổng hợp
<input onChange={e => set(e.target.value)} />
Đọc một giá trị input khi thay đổi
<form onSubmit={e => e.preventDefault()}>
Ngăn submit form mặc định
e.stopPropagation()
Ngăn sự kiện nổi bọt
<li onClick={() => remove(id)}>
Truyền tham số bằng một closure
<input onKeyDown={e => e.key === 'Enter'}
Xử lý một lần nhấn phím cụ thể
<div onMouseEnter={hover}>
Lắng nghe các sự kiện pointer
e.currentTarget.value
Đọc phần tử mà trình xử lý gắn vào
<button onClick={() => {}} type="button">
Tránh submit form ngầm
Danh sách & key
10arr.map(x => <li key={x.id}>{x.t}</li>)
Render một node cho mỗi mục
key={item.id}
Cho mỗi mục một key ổn định
key={index}
Key chỉ số chỉ dùng cho danh sách tĩnh
users.map(u => <Card key={u.id} {...u} />)
Trải các trường của mục thành props
{list.length === 0 && <Empty />}
Hiển thị nội dung dự phòng cho danh sách rỗng
import { Fragment } from 'react'
Nhập Fragment cho các nhóm có key
<Fragment key={id}>{a}{b}</Fragment>
Một fragment có key trong một danh sách
{rows.filter(r => r.on).map(...)}
Lọc trước khi map
Keys must be unique among siblings
Vì sao key giúp React so sánh danh sách
{[...Array(n)].map((_, i) => ...)}
Map một khoảng độ dài cố định
Context
10const ThemeContext = createContext('light')
Tạo một context với giá trị mặc định
import { createContext } from 'react'
Nhập factory context
<ThemeContext value={theme}>
Cung cấp một giá trị (cú pháp React 19)
<ThemeContext value={theme}><App /></ThemeContext>
Bọc cây đọc nó
const theme = useContext(ThemeContext)
Đọc context với useContext
const theme = use(ThemeContext)
Đọc context với API use
if (cond) { const t = use(Ctx); }
use có thể đọc context có điều kiện
export const ThemeContext = createContext()
Xuất một context dùng chung
<Ctx value={{ user, setUser }}>
Truyền một đối tượng làm giá trị
Avoid new objects each render
Memo hóa giá trị để hạn chế render lại
Ref
10const inputRef = useRef(null)
Tạo một bộ giữ ref
<input ref={inputRef} />
Gắn ref vào một node
inputRef.current.focus()
Truy cập node DOM qua current
function Field({ ref }) { return <input ref={ref} /> }
ref như một prop, không cần forwardRef
<Field ref={inputRef} />
Truyền một ref cho một thành phần
useImperativeHandle(ref, () => ({ focus }))
Phơi bày một API mệnh lệnh
const setRef = node => { box = node; }
Dùng một callback ref
<div ref={setRef} />
Gắn một callback ref
const count = useRef(0)
Lưu một giá trị mà không render lại
ref={node => { return () => cleanup(); }}
Callback ref kèm dọn dẹp (React 19)
Hiệu năng
10const Memo = memo(Component)
Bỏ qua render lại khi props bằng nhau
import { memo } from 'react'
Nhập tiện ích memo
const value = useMemo(() => calc(a), [a])
Cache một giá trị tính toán
const fn = useCallback(() => f(a), [a])
Cache định danh của một hàm
const Lazy = lazy(() => import('./Big.jsx'))
Tách mã một thành phần
import { lazy, Suspense } from 'react'
Nhập lazy và Suspense
<Suspense fallback={<Spin />}><Lazy /></Suspense>
Hiển thị nội dung dự phòng khi đang tải
startTransition(() => setQuery(q))
Đánh dấu cập nhật state không khẩn cấp
const slow = useDeferredValue(query)
Trì hoãn UI suy ra tốn kém
React Compiler auto-memoizes
Thường loại bỏ việc memo hóa thủ công
Khác & metadata
10<Suspense fallback={<Loading />}>
Ranh giới cho nội dung bất đồng bộ
class ErrorBoundary extends Component {}
Bắt lỗi render (lớp cũ)
<title>My Page</title>
Nâng tiêu đề tài liệu từ một thành phần
<meta name="description" content="..." />
Render thẻ meta vào phần head
<link rel="stylesheet" href="..." />
Nâng một link stylesheet
<Comp key={id} />
Đổi key để remount một thành phần
React.lazy(() => import('./Page.jsx'))
Nhập lười một thành phần route
createPortal(node, container)
Render vào một node DOM khác
{/* a comment */}
Viết một chú thích trong JSX
cleanup return in useEffect
Luôn giải phóng subscription/timer
Không có mục nào khớp với “:q”.
Cần trợ giúp?
Gặp sự cố với công cụ này? Hãy cho đội ngũ của chúng tôi biết.