ชีตสรุป React
เอกสารอ้างอิง React 19 ที่ค้นหาและพิมพ์ได้——คอมโพเนนต์, JSX, hook, Actions API ใหม่, context, ref และประสิทธิภาพ ฟรี
คอมโพเนนต์และ JSX
12function App() { return <h1>Hi</h1>; }
function component ที่คืน JSX
export default function App() {}
default-export คอมโพเนนต์
<Greeting name="Ada" />
render คอมโพเนนต์พร้อม props
{1 + 2} or {user.name}
ฝัง JS expression ด้วยวงเล็บปีกกา
<>{a}{b}</>
Fragment จัดกลุ่ม node ไม่เพิ่ม DOM
<div className="card">
ใช้ className ไม่ใช่ class สำหรับ CSS
{isOpen && <Menu />}
render ตามเงื่อนไขด้วย &&
{ok ? <Yes /> : <No />}
เลือกระหว่าง node ด้วย ternary
{items.map(i => <li key={i.id}>{i.t}</li>)}
render list จาก array
function Btn({ label, onClick }) {}
destructure props ใน signature
function Card({ children }) { return children; }
อ่าน JSX ซ้อนผ่าน prop children
<input value={v} onChange={onChange} />
input แบบ controlled ผูกกับ state
การ render และตั้งค่า
10import { createRoot } from 'react-dom/client'
import API ของ client root
createRoot(document.getElementById('root')).render(<App/>)
mount แอปเข้า DOM
import { StrictMode } from 'react'
import wrapper StrictMode
<StrictMode><App /></StrictMode>
เผยให้เห็นบั๊กระหว่างพัฒนา
import { hydrateRoot } from 'react-dom/client'
import API ของ hydration
hydrateRoot(el, <App />)
ผูก React เข้ากับ HTML จาก server
root.unmount()
ถอด root ที่ mount ไว้
import App from './App.jsx'
import คอมโพเนนต์จาก module
<App {...props} />
spread object เป็น props
export { Button, Card }
named-export หลายคอมโพเนนต์
State และ effect
12const [count, setCount] = useState(0)
ประกาศตัวแปร state
setCount(c => c + 1)
อัปเดตจากค่าก่อนหน้า
setUser(u => ({ ...u, name }))
อัปเดต state แบบ object โดยไม่แก้ของเดิม
useEffect(() => { run(); }, [dep])
รัน effect เมื่อ deps เปลี่ยน
useEffect(() => { /* once */ }, [])
รัน effect เฉพาะตอน mount
useEffect(() => () => cleanup(), [])
คืนฟังก์ชัน cleanup
const ref = useRef(null)
เก็บค่าที่เปลี่ยนได้ข้ามการ render
const [state, dispatch] = useReducer(r, init)
จัดการ state ซับซ้อนด้วย reducer
const theme = useContext(ThemeContext)
อ่านค่า context ที่ใกล้สุด
const memo = useMemo(() => calc(a), [a])
memoize การคำนวณที่ต้นทุนสูง
useLayoutEffect(() => {}, [])
รันแบบ synchronous หลัง layout
useSyncExternalStore(sub, get)
subscribe กับ store ภายนอก
hook และ API ของ React 19
12import { use } from 'react'
import use API ใหม่
const data = use(promise)
อ่าน promise พัก suspend จนพร้อม
const theme = use(ThemeContext)
อ่าน context อนุญาตตามเงื่อนไข
const [state, action, pending] = useActionState(fn, init)
ติดตาม state, action และ pending
const [opt, addOpt] = useOptimistic(state, reducer)
แสดงค่า optimistic ทันที
const { pending } = useFormStatus()
อ่านสถานะ submit ของฟอร์ม parent
const [isPending, startTransition] = useTransition()
ทำเครื่องหมายการอัปเดตว่าไม่เร่งด่วน
startTransition(async () => await save())
รัน Action แบบ async ใน transition
const deferred = useDeferredValue(value)
หน่วงค่าเพื่อให้ UI ตอบสนอง
const id = useId()
สร้าง id ไม่ซ้ำแบบเสถียร
<title>Page title</title>
render metadata ได้ทุกที่ใน tree
function Input({ ref }) {}
ref เป็น prop ปกติ ไม่ต้อง forwardRef
Form และ Action
12<form action={handleSubmit}>
ส่งฟังก์ชันเป็น Action ของฟอร์ม
function handleSubmit(formData) {}
Action รับ FormData
formData.get('email')
อ่าน field จาก FormData
const [state, action] = useActionState(submit, null)
เชื่อม Action เข้ากับ state ของคอมโพเนนต์
<form action={action}>
ใช้ Action ที่ห่อไว้บนฟอร์ม
const [s, a, pending] = useActionState(fn, init)
เปิดเผย flag pending สำหรับ UI
return { error: 'Invalid' }
คืนสถานะ error จาก Action
function Submit() { const { pending } = useFormStatus() }
อ่าน pending ภายในปุ่ม submit
<button disabled={pending}>Save</button>
ปิด submit ขณะ pending
import { requestFormReset } from 'react-dom'
import ตัวช่วย reset ฟอร์ม
requestFormReset(formEl)
reset ฟอร์มแบบ uncontrolled
<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} />
forward props ทั้งหมดด้วย spread
const { id, ...rest } = props
เลือก prop หนึ่งแล้วส่งที่เหลือ
<Avatar {...rest} size="lg" />
spread แล้วเขียนทับ prop หนึ่ง
function Btn(props: BtnProps) {}
กำหนดชนิด props ด้วย interface ของ TypeScript
<Slot label={<b>Hi</b>} />
ส่ง JSX ผ่าน prop ที่ตั้งชื่อ
Event
10<button onClick={handleClick}>
ผูก handler click
function handleClick(e) {}
รับ synthetic event
<input onChange={e => set(e.target.value)} />
อ่านค่า input เมื่อมีการเปลี่ยน
<form onSubmit={e => e.preventDefault()}>
หยุดการ submit ฟอร์มเริ่มต้น
e.stopPropagation()
ป้องกัน event ไม่ให้ bubble
<li onClick={() => remove(id)}>
ส่ง argument ด้วย closure
<input onKeyDown={e => e.key === 'Enter'}
จัดการการกดปุ่มที่กำหนด
<div onMouseEnter={hover}>
ฟัง pointer event
e.currentTarget.value
อ่าน element ที่ handler อยู่
<button onClick={() => {}} type="button">
เลี่ยงการ submit ฟอร์มโดยปริยาย
List และ key
10arr.map(x => <li key={x.id}>{x.t}</li>)
render หนึ่ง node ต่อรายการ
key={item.id}
ให้แต่ละรายการมี key เสถียร
key={index}
ใช้ index key เฉพาะ list แบบ static
users.map(u => <Card key={u.id} {...u} />)
spread field ของรายการเป็น props
{list.length === 0 && <Empty />}
แสดง fallback สำหรับ list ว่าง
import { Fragment } from 'react'
import Fragment สำหรับกลุ่มที่มี key
<Fragment key={id}>{a}{b}</Fragment>
fragment ที่มี key ใน list
{rows.filter(r => r.on).map(...)}
กรองก่อน map
Keys must be unique among siblings
ทำไม key ช่วยให้ React diff list
{[...Array(n)].map((_, i) => ...)}
map ช่วงความยาวคงที่
Context
10const ThemeContext = createContext('light')
สร้าง context พร้อมค่าเริ่มต้น
import { createContext } from 'react'
import context factory
<ThemeContext value={theme}>
ให้ค่า (ไวยากรณ์ React 19)
<ThemeContext value={theme}><App /></ThemeContext>
ห่อ tree ที่อ่านค่านั้น
const theme = useContext(ThemeContext)
อ่าน context ด้วย useContext
const theme = use(ThemeContext)
อ่าน context ด้วย use API
if (cond) { const t = use(Ctx); }
use อ่าน context ตามเงื่อนไขได้
export const ThemeContext = createContext()
export context ที่ใช้ร่วมกัน
<Ctx value={{ user, setUser }}>
ส่ง object เป็นค่า
Avoid new objects each render
memoize ค่าเพื่อจำกัดการ re-render
Ref
10const inputRef = useRef(null)
สร้างตัวเก็บ ref
<input ref={inputRef} />
ผูก ref เข้ากับ node
inputRef.current.focus()
เข้าถึง DOM node ผ่าน current
function Field({ ref }) { return <input ref={ref} /> }
ref เป็น prop ไม่ต้อง forwardRef
<Field ref={inputRef} />
ส่ง ref ไปยังคอมโพเนนต์
useImperativeHandle(ref, () => ({ focus }))
เปิดเผย imperative API
const setRef = node => { box = node; }
ใช้ callback ref
<div ref={setRef} />
ผูก callback ref
const count = useRef(0)
เก็บค่าโดยไม่ re-render
ref={node => { return () => cleanup(); }}
callback ref พร้อม cleanup (React 19)
ประสิทธิภาพ
10const Memo = memo(Component)
ข้ามการ re-render เมื่อ props เท่ากัน
import { memo } from 'react'
import ตัวช่วย memo
const value = useMemo(() => calc(a), [a])
cache ค่าที่คำนวณได้
const fn = useCallback(() => f(a), [a])
cache identity ของฟังก์ชัน
const Lazy = lazy(() => import('./Big.jsx'))
code-split คอมโพเนนต์
import { lazy, Suspense } from 'react'
import lazy และ Suspense
<Suspense fallback={<Spin />}><Lazy /></Suspense>
แสดง fallback ขณะโหลด
startTransition(() => setQuery(q))
ทำเครื่องหมายการอัปเดต state ที่ไม่เร่งด่วน
const slow = useDeferredValue(query)
หน่วง UI ที่ derived ต้นทุนสูง
React Compiler auto-memoizes
มักช่วยขจัดการ memoize แบบ manual
อื่นๆ และ metadata
10<Suspense fallback={<Loading />}>
ขอบเขตสำหรับเนื้อหา async
class ErrorBoundary extends Component {}
ดักจับ error การ render (class แบบเก่า)
<title>My Page</title>
ยก title ของเอกสารจากคอมโพเนนต์
<meta name="description" content="..." />
render meta tag เข้า head
<link rel="stylesheet" href="..." />
ยกลิงก์ stylesheet
<Comp key={id} />
เปลี่ยน key เพื่อ remount คอมโพเนนต์
React.lazy(() => import('./Page.jsx'))
import คอมโพเนนต์ route แบบ lazy
createPortal(node, container)
render เข้า DOM node อื่น
{/* a comment */}
เขียนคอมเมนต์ภายใน JSX
cleanup return in useEffect
ปล่อย subscription/timer เสมอ
ไม่มีรายการที่ตรงกับ “:q”
ต้องการความช่วยเหลือ?
พบปัญหากับเครื่องมือนี้หรือไม่? แจ้งทีมงานของเรา