本速查表收录 React 开发中最常用的顶层 API 与 Hooks，按使用场景分类，方便快速查阅。
一、内置核心 Hooks
| Hook | 用途 | 基本用法 | 注意事项 |
|------|------|----------|----------|
| useState | 在函数组件中添加局部状态 | const [state, setState] = useState(initialValue) | 更新函数可传新值或函数 setState(prev => prev + 1) |
| useEffect | 处理副作用（请求、订阅、DOM 操作） | useEffect(() => { / 副作用 / }, [deps]) | 返回清理函数避免内存泄漏；依赖数组为空仅执行一次 |
| useContext | 读取 Context 值，不依赖 Consumer | const value = useContext(MyContext) | Context 值变化时，组件会重渲染 |
| useReducer | 复杂状态逻辑（类似 Redux 的 reducer 模式） | const [state, dispatch] = useReducer(reducer, initialState) | 适合多个子状态或存在依赖的更新 |
| useCallback | 缓存函数引用，避免子组件无意义重渲染 | const fn = useCallback(() => { / ... / }, [deps]) | 应与 React.memo 配合使用，否则无优化效果 |
| useMemo | 缓存计算结果，避免重复昂贵计算 | const value = useMemo(() => compute(), [deps]) | 不要用于副作用；用于对象/数组引用稳定性 |
| useRef | 获取 DOM 节点引用，或存储跨渲染周期的变量 | const ref = useRef(initialValue) | .current 变更不触发重渲染 |
| useImperativeHandle | 配合 forwardRef，自定义暴露给父组件的方法 | useImperativeHandle(ref, () => ({ method(){} }), [deps]) | 谨慎使用，优先用 Props 传递 |
| useLayoutEffect | 在 DOM 更新后、浏览器绘制前同步执行副作用 | useLayoutEffect(() => { / 修改 DOM 或读取布局 / }, [deps]) | 会阻塞渲染，慎用；常用于测量 DOM |
| useTransition (React 18+) | 标记非紧急更新，让界面保持响应 | const [isPending, startTransition] = useTransition() | 用于搜索输入、选项卡切换等可被中断的更新 |
| useDeferredValue (React 18+) | 延迟更新某个值的显示，优先渲染紧急内容 | const deferredQuery = useDeferredValue(query) | 与 Suspense 配合时可显示旧数据直至新数据就绪 |
| useId (React 18+) | 生成唯一 ID，避免 SSR 水合不匹配 | const id = useId() | 不可用于 key，仅用于无障碍属性的 ID 绑定 |
| useSyncExternalStore (React 18+) | 订阅外部 store 的变化，保证并发安全 | const state = useSyncExternalStore(subscribe, getSnapshot) | 封装第三方状态库时使用 |
| useInsertionEffect (React 18+) | 在 DOM 插入前注入样式（CSS-in-JS 库专用） | useInsertionEffect(() => { / 插入样式 / }, [deps]) | 普通开发者无需使用 |
二、组件与渲染相关的顶层 API
| API | 用途 | 基本用法 / 示例 |
|-----|------|----------------|
| React.memo | 高阶组件，对函数组件进行浅比较 props 优化 | const MemoComp = React.memo(MyComponent, areEqual?) |
| React.forwardRef | 转发 ref 到子组件内部的 DOM 节点或组件实例 | const Comp = React.forwardRef((props, ref) => <input ref={ref} />) |
| React.lazy | 动态导入组件，实现代码分割 | const LazyComp = React.lazy(() => import('./Comp')) |
| React.Suspense | 包裹懒加载组件，显示加载中 fallback 内容 | <Suspense fallback={<Loading />}><LazyComp /></Suspense> |
| React.Fragment | 返回多个子节点而不额外包裹 DOM 元素 | <>...</> 或 <React.Fragment>...</React.Fragment> |
| React.StrictMode | 开发模式下启用额外检查（如过时 API、副作用重复执行） | <React.StrictMode><App /></React.StrictMode> |
| React.Profiler | 测量组件渲染性能 | <Profiler id="Nav" onRender={callback}><Nav /></Profiler> |
| createPortal | 将子节点渲染到父组件之外的 DOM 节点中 | ReactDOM.createPortal(<Modal />, document.body) |
| createRoot (React 18) | 创建并发模式渲染根节点，替代 ReactDOM.render | const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<App />) |
| hydrateRoot (React 18) | SSR 客户端水合，替代 ReactDOM.hydrate | ReactDOM.hydrateRoot(container, <App />) |
| renderToPipeableStream (React 18) | 服务端流式渲染，支持 Suspense | 配合 Node.js Stream 使用 |
三、组件实例相关 API（类组件）
| API | 用途 | 说明 |
|-----|------|------|
| React.Component | 类组件基类 | 使用 extends React.Component |
| React.PureComponent | 自动实现 shouldComponentUpdate 的浅比较 | 类组件性能优化手段 |
| componentDidMount / componentDidUpdate / componentWillUnmount | 类组件生命周期 | 函数组件已拥抱 useEffect，但仍需了解 |
四、React 元素创建与操作
| API | 用途 | 示例 |
|-----|------|------|
| React.createElement | 创建 React 元素（JSX 编译结果） | React.createElement('h1', {className: 'title'}, 'Hello') |
| React.cloneElement | 克隆元素并附加新 Props | React.cloneElement(child, { newProp: true }) |
| React.Children.map / forEach / count / only | 处理 props.children 不透明数据结构的工具 | React.Children.map(children, child => ...) |
五、Context 相关 API
| API | 用途 | 示例 |
|-----|------|------|
| React.createContext | 创建 Context 对象 | const ThemeCtx = React.createContext('light') |
| Context.Provider | 提供 Context 值 | <ThemeCtx.Provider value="dark">...</ThemeCtx.Provider> |
| Context.Consumer | 类组件或需要嵌套时消费 Context | <ThemeCtx.Consumer>{value => ...}</ThemeCtx.Consumer> |
| useContext | 函数组件内消费（推荐） | const theme = useContext(ThemeCtx) |
六、错误处理
| API | 用途 | 示例 |
|-----|------|------|
| componentDidCatch / static getDerivedStateFromError | 类组件错误边界 | 函数组件无法捕捉错误，需用 ErrorBoundary 类组件 |
| 第三方错误边界 | 常用 react-error-boundary 库 | import { ErrorBoundary } from 'react-error-boundary' |
七、TypeScript 常用 React 类型
| 类型 | 用途 | 示例 |
|------|------|------|
| React.FC<Props> | 函数组件类型（可选，有争议） | const Comp: React.FC<{name: string}> = ({name}) => ... |
| React.ReactNode | 任何可渲染的类型（JSX、字符串、null 等） | children: React.ReactNode |
| React.CSSProperties | 内联样式对象类型 | style: React.CSSProperties |
| React.HTMLProps<T> / React.ComponentProps<T> | 继承原生 HTML 元素 Props 或组件 Props | type ButtonProps = React.ComponentProps<'button'> |
| React.Ref<T> | Ref 的类型 | ref: React.Ref<HTMLInputElement> |
| React.MouseEvent / React.ChangeEvent | 合成事件类型 | onClick: (e: React.MouseEvent) => void |
速查表聚焦开发高频 API，更详细的用法与边界说明请参阅手册对应章节。