react

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

React

The skill is based on React, generated at 2026-01-31.

React is a JavaScript library for building user interfaces. It lets you compose complex UIs from small and isolated pieces of code called "components". React uses a declarative paradigm that makes it easier to reason about your application and aims to be both efficient and flexible.

本技能基于React开发，生成于2026年1月31日。

React是一个用于构建用户界面的JavaScript库。它允许你将复杂的UI拆分为名为“components（组件）”的小型、独立代码片段来组合实现。React采用声明式编程范式，让你更易理解应用逻辑，同时兼顾高效性与灵活性。

Core References

核心参考

Topic	Description	Reference
useState	Hook for managing component state with direct updates	core-usestate
useEffect	Hook for synchronizing components with external systems	core-useeffect
useContext	Hook for reading and subscribing to context	core-usecontext
useRef	Hook for referencing values that don't trigger re-renders	core-useref
useReducer	Hook for managing complex state with a reducer function	core-usereducer
Suspense	Component for displaying fallback UI while content is loading	core-suspense
memo	Higher-order component for memoizing component renders	core-memo
createContext	API for creating context objects	core-createcontext
Fragment	Component for grouping elements without wrapper nodes	core-fragment
StrictMode	Component for enabling additional development checks	core-strictmode

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

Features

功能特性

Performance Optimization

性能优化

Topic	Description	Reference
useMemo	Hook for caching expensive calculations	features-usememo
useCallback	Hook for caching function definitions	features-usecallback
lazy	API for code splitting and lazy loading components	features-lazy
useTransition	Hook for non-blocking state updates	features-usetransition
useDeferredValue	Hook for deferring non-critical UI updates	features-usedeferredvalue
useLayoutEffect	Hook that fires synchronously before browser repaint	features-uselayouteffect
startTransition	API for marking non-blocking state updates	features-starttransition

主题	说明	参考链接
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

Advanced Hooks

高级Hook

Topic	Description	Reference
useId	Hook for generating unique IDs for accessibility	features-useid
use	API for reading Promise and Context values	features-use
useActionState	Hook for managing form action state	features-useactionstate
useOptimistic	Hook for optimistic UI updates	features-useoptimistic
useInsertionEffect	Hook for CSS-in-JS libraries to inject styles	advanced-useinsertioneffect
useSyncExternalStore	Hook for subscribing to external stores	advanced-usesyncexternalstore
useImperativeHandle	Hook for customizing ref handles	advanced-useimperativehandle
useEffectEvent	Hook for extracting non-reactive logic from Effects	advanced-useeffectevent
useDebugValue	Hook for adding labels to custom hooks in DevTools	advanced-usedebugvalue

主题	说明	参考链接
useId	为无障碍功能生成唯一ID的Hook	features-useid
use	用于读取Promise和上下文值的API	features-use
useActionState	用于管理表单动作状态的Hook	features-useactionstate
useOptimistic	用于实现乐观UI更新的Hook	features-useoptimistic
useInsertionEffect	供CSS-in-JS库注入样式的Hook	advanced-useinsertioneffect
useSyncExternalStore	用于订阅外部存储的Hook	advanced-usesyncexternalstore
useImperativeHandle	用于自定义ref处理的Hook	advanced-useimperativehandle
useEffectEvent	用于从Effects中提取非响应式逻辑的Hook	advanced-useeffectevent
useDebugValue	用于在DevTools中为自定义Hook添加标签的Hook	advanced-usedebugvalue

React DOM APIs

React DOM API

Topic	Description	Reference
createRoot	API for creating a root to render React components	react-dom-createroot
hydrateRoot	API for hydrating server-rendered HTML	react-dom-hydrateroot
createPortal	API for rendering children into different DOM nodes	react-dom-createportal
flushSync	API for forcing synchronous updates	react-dom-flushsync

主题	说明	参考链接
createRoot	用于创建渲染React组件根节点的API	react-dom-createroot
hydrateRoot	用于为服务端渲染HTML进行注水的API	react-dom-hydrateroot
createPortal	用于将子元素渲染到不同DOM节点的API	react-dom-createportal
flushSync	用于强制同步更新的API	react-dom-flushsync

React Server Components

React服务端组件

Topic	Description	Reference
cache	API for caching function results in Server Components	rsc-cache

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

Advanced Components

高级组件

Topic	Description	Reference
Profiler	Component for measuring rendering performance	advanced-profiler
Activity	Component for hiding and restoring UI state	features-activity

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

Testing

测试

Topic	Description	Reference
act	Test helper for applying pending updates before assertions	testing-act

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

Best Practices

最佳实践

Topic	Description	Reference
Rules of Hooks	Fundamental rules for using React Hooks correctly	best-practices-rules-of-hooks
Component Purity	Rules for keeping React components and hooks pure	best-practices-purity

主题	说明	参考链接
Rules of Hooks	正确使用React Hooks的基本规则	best-practices-rules-of-hooks
Component Purity	保持React组件和Hook纯净性的规则	best-practices-purity

Key Recommendations

关键建议

Use hooks at the top level - Never call hooks conditionally or in loops
Keep components pure - Components should be idempotent and have no side effects during render
Use useEffect for side effects - Synchronize with external systems using Effects
Memoize expensive calculations - Use
```
useMemo
```
for costly computations,
```
useCallback
```
for functions passed to memoized components
Code split with lazy - Use
```
lazy
```
and
```
Suspense
```
for route-based code splitting
Avoid premature optimization - Profile first, optimize only when needed
Use React Compiler - Consider using React Compiler for automatic memoization
Handle dependencies correctly - Always include all reactive values in Effect and memoization dependencies

在顶层使用Hook - 切勿在条件语句或循环中调用Hook
保持组件纯净 - 组件在渲染时应具备幂等性，且不应产生副作用
使用useEffect处理副作用 - 借助Effects实现与外部系统的同步
缓存昂贵计算 - 对高成本计算使用
```
useMemo
```
，对传递给缓存组件的函数使用
```
useCallback
```
使用lazy进行代码分割 - 结合
```
lazy
```
与
```
Suspense
```
实现基于路由的代码分割
避免过早优化 - 先进行性能分析，仅在需要时再做优化
使用React Compiler - 可考虑使用React Compiler实现自动缓存
正确处理依赖项 - 务必将所有响应式值包含在Effect和缓存操作的依赖项中