React 语法速查表 - React 常用 Hooks 与组件开发大全
这张速查面向以函数组件和 Hooks 为主业的 React 开发者。内容从 useState/useEffect 的状态与副作用核心讲起，过渡到 useReducer、Context、useId 等进阶 Hooks，再讲 forwardRef、render props 等组件模式，接着是受控表单与基于 Context 的状态共享，最后落到 React.memo、懒加载和 Suspense 这类性能优化。每条都是可直接复制的片段，并标注好依赖数组与边界情况。读完你应能用 useEffect 驱动异步请求、用 Context 跨组件共享状态，并通过 memo/useCallback 减少不必要的重渲染。
Hooks 基础 6
const [count, setCount] = useState(0)useState 返回 [值, 更新函数]，调用 setCount 会触发组件重渲染
const [user, setUser] = useState({ name: "", age: 0 })对象状态的初始值；更新时注意用展开保持不可变
useEffect(() => { fetchData() }, [])依赖数组为空，只在组件挂载后执行一次，适合拉取初始数据
useEffect(() => { subscribe(id); return () => unsubscribe() }, [id])带清理回调的副作用，id 变化或卸载时先执行 return 清旧订阅
const ref = useRef(null)返回可变的 ref 对象，可挂 DOM 节点，也可存跨渲染不丢的值
const memoized = useMemo(() => compute(a, b), [a, b])依赖不变时复用上次计算结果，避免昂贵计算重复执行
Hooks 进阶 6
const [state, dispatch] = useReducer(reducer, initialState)复杂状态管理
const value = useContext(MyContext)跨层级数据共享
useLayoutEffect(() => { measure() }, [deps])同步执行 DOM 测量
useImperativeHandle(ref, () => ({ focus: () => {} }))暴露子组件方法给父组件
const id = useId()生成唯一 ID（SSR 安全）
const [isPending, startTransition] = useTransition()非阻塞更新（React 18）
组件模式 6
function App({ name, children }) { return <div>{children}</div> }props 与 children
const Button = forwardRef((props, ref) => <button ref={ref} />)forwardRef 转发 ref
function withAuth(Component) { return (props) => <Component {...props} /> }高阶组件（HOC）
function List({ render }) { return items.map(render) }render props 模式
const Memo = React.memo(Component)记忆组件避免重渲染
const Lazy = React.lazy(() => import("./Comp"))懒加载组件
事件与表单 5
<button onClick={(e) => handleClick(e)}>Click</button>点击事件
<input value={val} onChange={e => setVal(e.target.value)} />受控组件
<form onSubmit={e => { e.preventDefault(); submit() }}>表单提交阻止默认刷新
e.stopPropagation()阻止事件冒泡
e.preventDefault()阻止默认行为
状态管理 5
setCount(prev => prev + 1)基于前值更新状态
setUser(prev => ({ ...prev, name: "new" }))不可变更新对象状态
const ThemeContext = createContext("light")创建 Context
<ThemeContext.Provider value="dark">提供 Context 值
const value = useContext(ThemeContext)消费 Context
性能优化 5
const MemoComp = React.memo(MyComponent)记忆组件
const value = useMemo(() => expensive(a, b), [a, b])记忆计算结果
const handler = useCallback(() => {}, [deps])记忆回调函数
<Suspense fallback={<Loading />}><Lazy /></Suspense>懒加载与代码分割
const [deferred] = useDeferredValue(value)延迟更新非关键部分
常用模式 6
{isLoading ? <Loading /> : <Content />}条件渲染
{show && <Menu />}短路渲染
{items.map(item => <li key={item.id}>{item.name}</li>)}列表渲染必须带 key
class ErrorBoundary extends React.Component { static getDerivedStateFromError(e) {} }错误边界捕获子组件错误
ReactDOM.createPortal(<Modal />, document.body)Portal 渲染到组件树外
<Comp {...defaultProps} {...props} />合并默认 props 与传入 props
提示
- useEffect 的依赖数组为空 [] 时只在挂载时执行一次，类似 componentDidMount。
- useMemo 和 useCallback 用于性能优化，避免不必要的重新计算和渲染。
- React 18 的 StrictMode 在开发模式下会双重调用 useEffect，帮助发现副作用问题。
- Suspense + React.lazy() 可以实现组件懒加载和代码分割。
- 列表渲染必须为每个元素提供稳定的 key，避免用数组 index 作为 key。
由 巧匠 维护
公开更新于 2026年7月21日，内容持续校对官方文档。