过境笔记

主题

React 查漏补缺清单 ​

日期：2026-07-28

这份文档跟另外两份不一样，先说清楚三者关系，别看混了：

  • React 学习路线 / 低代码进阶系列总规划：告诉你"做低代码平台这个项目，按什么顺序推进"。是项目路线。
  • 这份（查漏补缺清单）：告诉你"光跟着现有课程走，React 本身有哪些常识被漏掉了"。是能力体检报告。

一句话：前两份教你把项目做完，这份保证你不会"项目会做，但 React 有窟窿"。

1. 你已经会的（坐标） ​

跟完基础课 + 进阶课，你手里已经有这些：

text
基础课：JSX、函数组件、useState、props、受控表单、
        数组不可变更新、条件渲染、样式、useMemo、自定义 Hook、useCallback、React.memo

进阶课：Babel 浏览器端编译、动态 createElement、简易 schema 表单、
        多文件打包、外部依赖、沙箱隔离、版本热更新

看着不少。但下面这些，课程没教或只擦了个边，而它们都是真实项目里天天用的。

2. ⚠️ 三个最扎眼的缺口（必须优先补） ​

这三个不是"进阶"，是"基础里漏掉的基础"。不补，你连一个会请求数据的普通页面都写不利索。

缺口一：useEffect（副作用） ​

基础课完全没讲。 这是最大的坑。

只要你的组件需要「跟组件外面的世界打交道」——请求接口、设置定时器、订阅事件、手动操作 DOM、同步 localStorage——就得用 useEffect。

必须搞明白的点：

  • effect 什么时候执行（渲染后）
  • 依赖数组 [] / [x] / 不写，三种行为的区别
  • 清理函数（return 一个函数）——不写会内存泄漏 / 重复订阅
  • 为什么"effect 里改 state 又把 state 放进依赖"会死循环

这是新手 React 最大的分水岭。花 2～3 天专门啃它，值。

缺口二：useRef ​

基础课也没讲。 两个用途：

  1. 拿到真实 DOM 节点（比如自动聚焦一个 input、测量元素尺寸）
  2. 存「不触发重渲染的可变值」（比如存定时器 id、存上一次的值）

半天就能搞懂，但不知道它，很多场景你会写得很别扭。

缺口三：路由（React Router） ​

课程完全没碰。 你现在做的都是单页面。任何有多个页面的应用（列表页→详情页、登录→主页）都要路由。

必学：<Routes> / <Route>、useNavigate、useParams、嵌套路由、路由懒加载。

3. 必修补齐清单 ​

三个缺口补完，再按这个顺序补齐"合格 React 开发者"的其余必修项：

模块学什么为什么必学
useContext + useReducer跨层级共享状态、复杂状态收敛状态一多，useState 就不够用了
异步数据获取fetch + loading/error/空状态三态、React Query 或 SWR真实应用 90% 在跟接口打交道
TypeScript × React组件 props 类型、事件类型、泛型组件你的低代码全是"类型驱动"，TS 不熟寸步难行
错误边界 Error Boundary组件出错时兜底，不让整页白屏动态加载用户组件，随时可能崩，你尤其需要
Suspense + lazy组件懒加载、代码分割首屏性能、按需加载
表单进阶react-hook-form + 校验（zod / yup）手写受控表单到后面会累死

4. 进阶（按需，不急） ​

上面补完你已经是个能独立干活的 React 开发者了。下面这些按兴趣和项目需要挑着学：

  • 状态管理库：Zustand（轻量，推荐）/ Redux Toolkit（大项目）
  • 组件设计模式：复合组件（Compound Components）、受控 vs 非受控、render props、自定义 Hook 进阶
  • 性能进阶：虚拟列表（长列表）、Profiler 定位卡顿、React 18 并发特性（useTransition / useDeferredValue）
  • 样式方案：CSS Modules / Tailwind / CSS-in-JS，挑一个用熟
  • 测试：React Testing Library + Vitest，给关键逻辑加测试
  • React 新特性了解：Server Components、Actions（知道有这回事，暂不深究）

5. 怎么补（节奏建议） ​

别专门停下项目来"补基础"，那样枯燥又记不住。推荐边做项目边补：

text
现在～基础课做完：正常推进
  ↓
基础课一结束，立刻插入「三个扎眼缺口」专项：
  useEffect（2～3 天）→ useRef（半天）→ React Router（2～3 天）
  ↓
然后进阶课 + 必修清单，穿插着补
  ↓
进阶（第 4 节）随缘，遇到需求再学

关键提醒：useEffect 别拖。它在低代码进阶系列总规划的"第 3 站"才正式出现，但那太晚了——基础课一做完就该补，否则你连拉个接口数据都不会。

6. 三份文档怎么配合 ​

text
React 学习路线              → 最初的知识点地图（入门时看）
React 查漏补缺清单（本篇）  → 体检：现有课程漏了啥，按这个补窟窿
低代码进阶系列总规划        → 项目路线：做低代码平台按站推进

做项目看"总规划"，怕自己有知识盲区就翻"本篇"，两条腿走路。

7. 一句话总结 ​

你不缺"会做项目"，你缺的是 useEffect、useRef、路由、异步数据、TS 这几块任何 React 项目都要用、但现有课程没教全的常识。基础课一结束，先补这几个窟窿，再往项目路线上冲。