⚛️ React 学习路线

85 个互动教程

React 入门 — 组件化构建 UI

了解 React：最流行的前端框架，组件化思想，声明式 UI

React JSX — JavaScript 中的 HTML

JSX 语法：表达式嵌入、条件渲染、列表渲染、样式

React Props

学习props传值

React 事件

学习onClick

React useState — 状态管理

用 useState Hook 管理组件自身的状态

React useEffect — 副作用处理

数据请求、定时器、DOM 操作，理解依赖数组

React 列表

学习列表渲染

React 样式方案

学习React中的多种样式方案：内联样式、CSS Modules、CSS-in-JS、条件样式

React 数据请求 — Fetch API 实战

在 React 中发送 HTTP 请求，处理加载、错误、成功三种状态

React Context — 跨组件共享数据

用 Context 替代 props 逐层传递，全局主题/语言/用户

React 性能优化 — memo/useMemo/useCallback

避免不必要的重渲染，提升 React 应用性能

React Hooks规则

学习Hooks规则

React Router 路由

react-router-dom: BrowserRouter/Route/Link/useParams

React 表单处理

受控组件/非受控组件/useRef/表单验证

React 自定义 Hook

封装可复用逻辑：useLocalStorage/useFetch/useDebounce

React Context 深入

createContext+Provider+useContext 全局状态

React 性能优化：memo、useMemo、useCallback 实战

掌握 React 三大性能优化 API，让你的应用告别不必要的重渲染。

React Render Props 模式

React Render Props：通过prop传递渲染函数、children as function、与HOC/Hooks对比、实际应用（鼠标追踪/窗口尺寸/数据获取）

React 并发特性 Concurrent Features

React 18并发渲染：useTransition/useDeferredValue延迟更新、自动批处理Automatic Batching、Suspense+流式SSR、并发模式vs传统模式

React Server Components 服务端组件

React Server Components：零客户端JS的服务端组件、'use client'指令、Server Actions服务端操作、RSC Payload流式传输、Next.js App Router实现

React 性能优化 memo/useMemo/useCallback

React性能：React.memo避免不必要渲染（自定义比较函数）、useMemo缓存计算值、useCallback缓存函数引用、什么时候该用/不该用这些优化

React Compound Components 复合组件模式

Compound Components：通过Context隐式共享状态、React.Children.map克隆子元素、Tabs/Select/Accordion组件实现、与Render Props对比

React Portal 传送门

ReactDOM.createPortal：渲染到DOM树外部节点、模态框Modal/工具提示Tooltip/下拉菜单Dropdown实现、事件冒泡（Portal事件在React树中冒泡）

React Zustand 状态管理

Zustand轻量状态管理：create创建store、selector选择器精确订阅、middleware中间件（persist持久化/devtools调试/immer不可变）、与Redux对比

React TanStack Query 数据获取

TanStack Query（React Query v5）：useQuery/useMutation、staleTime/cacheTime缓存策略、invalidateQueries手动刷新、乐观更新Optimistic Updates、无限滚动useInfiniteQuery

React Hook Form 高性能表单

React Hook Form：register注册表单字段、handleSubmit处理提交、formState.isDirty/isValid、useFieldArray动态表单数组、Zod/Yup验证集成、非受控组件vs受控组件性能

React Framer Motion 动画

Framer Motion：motion组件、animate动画属性、variants动画变体、whileHover/whileTap手势、layoutId共享布局动画（Layout Animation）、AnimatePresence退出动画

React useErrorBoundary 自定义错误处理

React自定义Error Boundary封装：useErrorBoundary Hook、resetErrorBoundary重置、onError错误日志上报、与Suspense组合处理加载/错误/数据状态

Redux Toolkit 状态管理

Redux Toolkit（RTK）：createSlice自动生成action/reducer、configureStore配置、createAsyncThunk异步操作、RTK Query数据获取缓存、与Zustand对比

React Router v6 路由

React Router v6：createBrowserRouter/createHashRouter、Outlet嵌套路由、loader/action数据加载/提交、useParams/useSearchParams、lazy路由懒加载、错误路由errorElement

React Three Fiber 3D开发

React Three Fiber（R3F）：在React中声明式编写Three.js场景、Canvas组件、useFrame动画循环、useLoader加载3D模型（GLTF/OBJ）、Drei工具集

React 测试实践指南

React Testing Library深入：按角色查询（getByRole优先）、userEvent模拟用户交互、Mock Service Worker拦截API、测试自定义Hook（renderHook）、快照测试的争议

React useRef 与 useCallback 深度

useRef深入：存储可变值不触发重渲染、ref转发forwardRef、useImperativeHandle暴露命令式API、useCallback配合React.memo避免不必要渲染、ref回调vs createRef

React useEffect 深入

useEffect深入：依赖数组的比较（Object.is）、清理函数cleanup执行时机、严格模式Strict Mode双重调用、useLayoutEffect同步布局副作用（DOM测量后同步修改）、竞态条件解决

React Context 深入与性能

React Context深入：Provider value引用变化导致全部消费者重渲染（用useMemo包裹value）、Context拆分（频繁变/不变分离）、useContext+useReducer替代Redux、Context vs Prop Drilling

React TanStack Table 表格

TanStack Table（React Table v8）：Headless UI表格库、columns/rows/data定义、sorting/filtering/pagination、row selection、与shadcn/ui Table集成

React 性能优化

React性能优化：React.memo()避免不必要渲染、useMemo/useCallback缓存值和函数、key的正确使用、虚拟列表react-window、Chrome Profiler分析、懒加载Suspense

React 自定义 Hook 设计模式

自定义Hook模式：useLocalStorage/useDebounce/usePrevious/useToggle/useFetch/useMediaQuery/useEventListener、Hook命名use前缀规则、自定义Hook测试renderHook

React 状态管理方案全景

React状态管理选型：useState+Context(内置/简单应用)→Zustand(轻量)→Redux Toolkit(RTK大型应用)→Jotai(原子化)→MobX(响应式)→XState(状态机)如何决策

React Hooks 规则与陷阱

Hooks规则深入：只能在函数组件顶层调用（不能在条件/循环/return后/普通JS函数中/Class组件中）、为什么要有这些规则（链表存储状态依赖调用顺序）、eslint-plugin-react-hooks检查

React Suspense 与 Transitions

React Transitions深入：useTransition(isPending,startTransition)标记非紧急更新、useDeferredValue延迟值渲染、Suspense的两种用法（代码分割懒加载/数据获取/流式SSR）

React Server Components 深入

React Server Components深入：Server Components无交互(默认)/Client Components有交互('use client')、Server Actions表单提交函数、RSC Payload流式传输

React Strict Mode 严格模式

React.StrictMode开发环境行为：双次调用函数组件体/constructor/render/shouldComponentUpdate、双次调用useState/useReducer/useMemo的初始化函数、检测意外的副作用/过时的API、纯函数检查

React useId 唯一 ID 生成

React 18 useId Hook：生成跨服务端/客户端一致的唯一ID（无障碍关联/表单label- input关联）、比自增计数器更安全（SSR hydration不冲突）、不要用useId生成列表key

React useDeferredValue vs useTransition

useDeferredValue延迟单个值vs useTransition包裹状态更新、Debounce vs Deferred Value（并发渲染中断恢复不丢失）、Search筛选列表应用（输入即时/结果延迟渲染不阻塞输入）

React useImperativeHandle 深入

useImperativeHandle(ref,()=>({focus,scrollTo}))暴露子组件命令式API给父组件、配合forwardRef使用、使用场景（输入框focus/scrollTo/视频播放控制）、不要滥用（优先声明式props）

React useSyncExternalStore 外部Store

useSyncExternalStore（React 18/订阅外部可变Store/并发渲染安全）：subscribe/subscribe+getSnapshot/getServerSnapshot(SSR)、Redux/ Zustand的底层Hook、 Zustand v4强制迁移到useSyncExternalStore

React Transition Group 动画库

React Transition Group动画库：CSSTransition(unmountOnExit/classNames/appear)、Transition(onEnter/onEntering/onEntered/onExit/onExiting/onExited状态回调)、SwitchTransition切换动画、TransitionGroup列表动画

TanStack Virtual 虚拟滚动

TanStack Virtual（虚拟列表/只渲染可见项/大列表性能神器）：useVirtualizer创建virtualizer、VirtualItem测量和定位、动态尺寸estimateSize/measureElement、与TanStack Table集成表格虚拟化、与react-window对比（更新/更灵活）

React Aria 无障碍组件

React Aria（Adobe React Spectrum/无障碍优先的Hooks库）：useButton/useTextField/useSelect/ useComboBox/useListBox等Hooks、键盘导航/ARIA属性自动管理、国际化i18n、与shadcn/ui/ Headless UI对比

React useEffect Cleanup 深入

useEffect清理函数深入：返回的函数何时执行（组件卸载/依赖变化重新执行effect前/StrictMode在开发环境挂载→卸载→重新挂载测试清理正确性）、清理订阅/定时器/事件监听/AbortController、不清理的后果（内存泄漏/竞态条件/过期回调）

React Callback Refs 回调引用

React Callback Refs（函数形式的ref替代createRef/useRef）：ref={node=>this.node=node}在挂载/卸载时调用、每次渲染都触发（用useCallback稳定化）、多个ref合并管理、useRef回调ref的对比（更灵活但需注意更新时机）

React Server Actions 入门

React 19 Server Actions：'use server'指令定义服务端函数、在Client Component中直接调用Server Action（替代API Route+ fetch）、useActionState管理action状态(提交中/Pending)、useOptimistic乐观更新（先更新UI后等待服务器确认再回退或保持）、useFormStatus表单状态

React useOptimistic 乐观更新

React 19 useOptimistic Hook：const[optimistic,addOptimistic]=useOptimistic(state,reducer)、addOptimistic触发即时UI更新→服务器返回成功→清除乐观更新→失败回退为state、适合点赞/收藏/拖拽排序等即时反馈场景、与React Query optimisticUpdate对比

React useDebugValue Hook

useDebugValue(value,formatter?)在React DevTools中显示自定义Hook的调试标签、formatter格式化函数（只在DevTools打开时调用不浪费性能）、在自定义Hook中使用提升开发体验

React DnD 拖拽实现

React DnD（拖拽库/react-dnd/react-dnd-html5-backend）：useDrag定义可拖拽源(item/collect)、useDrop定义可放置目标(accept/collect/drop)、拖拽预览DragPreview、DndProvider包裹应用、简单看板Kanban实现

React Spring 动画库

React Spring（基于弹簧物理的动画库）：useSpring({from,to,config})定义弹簧动画、useSprings多个弹簧动画、useTrail逐项延迟动画(列表入场效果)、useTransition进场/退场/列表过渡动画、animated原生组件(animated.div)