react

React

该技能基于 React，生成于 2026-01-31。

React 是一个用于构建用户界面的 JavaScript 库。它让你可以从称为“组件”的小型独立代码片段组合出复杂的 UI。React 采用声明式范式，使你更容易推理应用程序的逻辑，并力求兼顾高效与灵活。

核心参考

主题	描述	参考
useState	用于通过直接更新管理组件状态的 Hook	core-usestate
useEffect	用于将组件与外部系统同步的 Hook	core-useeffect
useContext	用于读取和订阅 context 的 Hook	core-usecontext
useRef	用于引用不会触发重新渲染的值的 Hook	core-useref
useReducer	用于通过 reducer 函数管理复杂状态的 Hook	core-usereducer
Suspense	用于在内容加载时显示后备 UI 的组件	core-suspense
memo	用于记忆化组件渲染的高阶组件	core-memo
createContext	用于创建 context 对象的 API	core-createcontext
Fragment	用于在不产生包装节点的情况下对元素进行分组的组件	core-fragment
StrictMode	用于启用额外开发检查的组件	core-strictmode

特性

性能优化

主题	描述	参考
useMemo	用于缓存开销较大的计算的 Hook	features-usememo
useCallback	用于缓存函数定义的 Hook	features-usecallback
lazy	用于代码分割和懒加载组件的 API	features-lazy
useTransition	用于非阻塞状态更新的 Hook	features-usetransition
useDeferredValue	用于推迟非关键 UI 更新的 Hook	features-usedeferredvalue
useLayoutEffect	在浏览器重绘前同步触发的 Hook	features-uselayouteffect
startTransition	用于标记非阻塞状态更新的 API	features-starttransition

高级 Hook

主题	描述	参考
useId	用于生成无障碍所需唯一 ID 的 Hook	features-useid
use	用于读取 Promise 和 Context 值的 API	features-use
useActionState	用于管理表单操作状态的 Hook	features-useactionstate
useOptimistic	用于乐观 UI 更新的 Hook	features-useoptimistic
useInsertionEffect	供 CSS-in-JS 库注入样式的 Hook	advanced-useinsertioneffect
useSyncExternalStore	用于订阅外部 store 的 Hook	advanced-usesyncexternalstore
useImperativeHandle	用于自定义 ref 句柄的 Hook	advanced-useimperativehandle
useEffectEvent	用于从 Effect 中提取非响应式逻辑的 Hook	advanced-useeffectevent
useDebugValue	用于在 DevTools 中为自定义 Hook 添加标签的 Hook	advanced-usedebugvalue

React DOM API

主题	描述	参考
createRoot	用于创建根以渲染 React 组件的 API	react-dom-createroot
hydrateRoot	用于水合服务端渲染 HTML 的 API	react-dom-hydrateroot
createPortal	用于将子元素渲染到不同 DOM 节点的 API	react-dom-createportal
flushSync	用于强制同步更新的 API	react-dom-flushsync

React 服务端组件

主题	描述	参考
cache	用于在服务端组件中缓存函数结果的 API	rsc-cache

高级组件

主题	描述	参考
Profiler	用于测量渲染性能的组件	advanced-profiler
Activity	用于隐藏和恢复 UI 状态的组件	features-activity

测试

主题	描述	参考
act	用于在断言前应用待处理更新的测试辅助工具	testing-act

最佳实践

主题	描述	参考
Hooks 规则	正确使用 React Hooks 的基本规则	best-practices-rules-of-hooks
组件纯粹性	保持 React 组件和 Hooks 纯粹的规则	best-practices-purity

关键建议

• 在顶层使用 Hooks - 绝不要在条件语句或循环中调用 Hooks
• 保持组件纯粹 - 组件应当是幂等的，并且在渲染期间没有副作用
• 使用 useEffect 处理副作用 - 使用 Effect 与外部系统同步
• 缓存昂贵的计算 - 对于开销大的计算使用 useMemo，对于传递给记忆化组件的函数使用 useCallback
• 使用 lazy 进行代码分割 - 使用 lazy 和 Suspense 进行基于路由的代码分割
• 避免过早优化 - 先进行性能分析，只在需要时进行优化
• 使用 React Compiler - 考虑使用 React Compiler 进行自动记忆化
• 正确处理依赖项 - 始终在 Effect 和记忆化依赖项中包含所有响应式值