React Cheatsheet - Hooks & Components
React 18 日常开发必备语法与 Hooks 都在这里了，从 useState 到 useEffect，按类别分类整理，写代码时直接复制。
Back to LanguagesHooks 基础 6
const [count, setCount] = useState(0)基础状态
const [user, setUser] = useState({ name: "", age: 0 })对象状态初始值
useEffect(() => { fetchData() }, [])挂载时执行一次
useEffect(() => { subscribe(id); return () => unsubscribe() }, [id])带清理的副作用
const ref = useRef(null)引用 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
💡 Tips
- useEffect 的依赖数组为空 [] 时只在挂载时执行一次，类似 componentDidMount。
- useMemo 和 useCallback 用于性能优化，避免不必要的重新计算和渲染。
- React 18 的 StrictMode 在开发模式下会双重调用 useEffect，帮助发现副作用问题。
- Suspense + React.lazy() 可以实现组件懒加载和代码分割。
- 列表渲染必须为每个元素提供稳定的 key，避免用数组 index 作为 key。