过境笔记

主题

React 低代码核心补全课 ​

把基础课漏掉的那几块补齐：useEffect、useRef、useContext / useReducer、路由、异步数据、错误边界。 n

0 / 8 完成

不是新开一个项目，是继续改造你基础课做的那个 InfoCard 配置页，边加功能边学。

为什么需要这门课 ​

基础课教会了你用 React 做一个配置驱动的页面。但它有几个没讲到的东西，而它们是任何真实项目都躲不开的：

  • 想把配置存起来、刷新还在？——需要 useEffect
  • 想新增字段时输入框自动聚焦？——需要 useRef
  • 配置项一多，props 透传五六层？——需要 useContext + useReducer
  • 想做"列表页 → 编辑页"多页面？——需要路由
  • 想把配置存后端、连真实数据？——需要异步数据处理
  • 组件崩了不想整页白屏？——需要错误边界

这门课就是来补这些窟窿的。

前置要求 ​

必须完成基础课 Day 1～12。

你需要熟练：

  • 函数组件、props、useState
  • 受控表单、事件处理
  • 数组的不可变更新（map / filter / spread）
  • 自定义 Hook（基础课 Day 10）

没学完基础课的，先回去。

最终效果 ​

学完这门课，你的 InfoCard 项目会长出这些能力：

  1. ✅ 配置自动保存，刷新页面不丢
  2. ✅ 防抖保存 + "已保存"状态提示
  3. ✅ 新增字段自动聚焦，交互更顺
  4. ✅ 配置状态用 Reducer 统一管理
  5. ✅ Context 全局共享，告别 props 透传
  6. ✅ 多页面：组件列表页 + 配置编辑页
  7. ✅ 连接 mock 后端，处理加载/错误/空三态
  8. ✅ 预览区错误边界，组件崩了只崩局部

学习路线 ​

共 8 天，分三个阶段。

阶段一：副作用与引用（Day 1～3） ​

补上基础课最大的窟窿。

Day主题核心 Hook
Day 1配置自动保存useEffect
Day 2依赖、清理与防抖保存useEffect 进阶
Day 3DOM 引用与可变值useRef

阶段二：状态升级（Day 4～5） ​

重构配置状态，告别 props 透传。

Day主题核心 Hook
Day 4收敛配置变更useReducer
Day 5消灭 props 透传useContext

阶段三：多页面与数据（Day 6～8） ​

做成真实应用。

Day主题核心
Day 6多页面应用React Router
Day 7异步数据三态useEffect + mock API
Day 8错误边界与收尾Error Boundary

环境要求 ​

  • Node.js 18+
  • 基础课 Day 12 的完整项目代码
  • VS Code + ESLint + Prettier

技术栈 ​

在基础课基础上新增：

  • react-router-dom - 路由（Day 6）
  • 其余全是 React 内置 Hook，不引额外状态库

每天学习时长 ​

  • 每天用时：90～120 分钟
  • 总周期：1.5～2 周

学习建议 ​

  1. 必须先完成基础课
  2. Day 1、2 是地基：useEffect 一定要搞透，别背规则，要能自己判断
  3. 每天写代码验证，别只看不练
  4. 依赖数组写错就调试，这门课最值钱的就是把 effect 搞明白

开始 ​

准备好了吗？

→ Day 1：useEffect 入门——配置自动保存

这门课补完，你就从"会写页面"变成"能写真实应用"了。加油，笨蛋！