React 一周速通实战计划

这份计划是给“想在 7 天内快速建立 React 实战能力”的自己准备的。

目标不是把 React 所有知识点背完，而是用一周时间做到下面三件事：

1. 能独立写出中小型 React 页面和组件。
2. 能理解 React 的核心工作方式，不只是会复制代码。
3. 能做出一个完整项目，并为后续接 Web3 / Next.js / 全栈打基础。

学习策略

这一周采用一个原则：

先把 React 当成“状态驱动 UI 的工程化方法”来学，而不是背 API。

也就是说，你每天都要围绕这几个核心问题训练：

• 数据放哪里？
• 状态怎么变化？
• 组件怎么拆？
• 副作用什么时候发生？
• 页面为什么会重新渲染？
• 这段逻辑应该放在组件里、hook 里，还是工具函数里？

如果你能把这些问题想明白，React 就真正入门了。

一周结束时的成果

一周后你至少要拿到这几个结果：

• 一个可运行的 React 项目
• 一套自己写过的组件
• 会用 props、state、useEffect、useMemo、useRef、自定义 Hook
• 会做表单、列表、过滤、搜索、异步请求、状态提升
• 会做基本的项目结构拆分
• 能说清楚 React 的渲染、依赖、闭包、受控组件这些高频概念

总体安排

建议每天投入 5 - 8 小时，分成三段：

• 上午：学核心概念 + 小练习
• 下午：做当天模块功能
• 晚上：复盘 + 手写一遍关键代码 + 输出笔记

如果哪天时间不够，优先保证“写代码”和“复盘”，视频或文章反而可以少一点。

Day 1：React 基础心智模型

目标

先建立 React 的最小正确理解。

必学内容

• React 是什么：声明式 UI、组件化、状态驱动视图
• Vite 创建 React 项目
• JSX 语法
• 组件
• props
• 事件绑定
• 条件渲染
• 列表渲染
• key 的作用

你今天必须会

• 独立创建一个 React 项目
• 写多个函数组件
• 父组件给子组件传值
• 用数组渲染列表
• 理解为什么列表不能乱用索引当 key

实战任务

做一个“学习任务清单”静态版页面：

• 顶部标题区
• 今日学习卡片
• 学习任务列表
• 完成状态标签
• 一个简单的筛选按钮组

今日验收标准

• 不看教程，自己能从零写出 5 个以上组件
• 能解释 props 和普通函数参数的关系
• 能解释 React 为什么喜欢组件拆分

Day 2：状态、事件与受控组件

目标

真正开始“交互”。

必学内容

• useState
• 状态更新是异步感知的
• 不可变更新
• 表单输入
• 受控组件
• 状态提升

你今天必须会

• 新增任务
• 删除任务
• 切换任务完成状态
• 用输入框维护表单状态
• 把共享状态提到父组件

实战任务

把 Day 1 的静态任务清单改造成可操作版本：

• 输入框新增任务
• 点击复选框切换完成状态
• 点击按钮删除任务
• 统计“总数 / 已完成 / 未完成”

今日验收标准

• 不直接改原数组或原对象
• 能解释为什么 React 里经常写 setItems([...items, newItem])
• 能说清楚“谁拥有状态，谁就应该控制状态”

Day 3：副作用、数据请求与组件生命周期思维

目标

理解 React 中最容易让人迷糊的一块。

必学内容

• useEffect
• 依赖数组
• 首次渲染 / 依赖变化后的执行时机
• 清理函数
• 异步请求
• loading / error / empty 三态

你今天必须会

• 用 useEffect 拉一次接口数据
• 正确处理依赖
• 避免最明显的无限循环
• 把异步状态单独管理清楚

实战任务

在项目里新增“学习资源页”或“文章列表页”：

• 从公开 API 获取数据
• 展示加载中、加载失败、空列表、正常列表
• 支持关键词搜索

今日验收标准

• 能解释 useEffect 不是“生命周期替代品”这么简单
• 能说清楚副作用和纯渲染的区别
• 能举出一个依赖数组写错导致 bug 的例子

Day 4：组件设计、复用与自定义 Hook

目标

开始从“会写页面”走向“会组织代码”。

必学内容

• 组件拆分原则
• 展示组件 vs 逻辑组件
• 自定义 Hook
• 复用状态逻辑
• children
• 组合优于继承

你今天必须会

• 把重复逻辑抽成 Hook
• 把重复 UI 抽成基础组件
• 让项目结构更清晰

实战任务

重构前 3 天的代码：

• 抽出 useTasks
• 抽出 useFetchResources
• 封装 Button、Card、EmptyState、SearchBar

今日验收标准

• 项目目录不再全塞在一个文件里
• 组件职责更单一
• 能解释“为什么这个逻辑适合做成 hook”

Day 5：性能、闭包与高级 Hook 入门

目标

补上初学者经常一知半解，但面试和实战都高频出现的部分。

必学内容

• 重新渲染的触发条件
• 闭包问题
• useRef
• useMemo
• useCallback 了解即可
• React 调试思路

你今天必须会

• 区分“值缓存”和“DOM 引用”
• 知道什么情况下才值得做 memo 优化
• 能识别 stale closure 的基本场景

实战任务

继续优化你的项目：

• 搜索输入防抖
• 长列表统计信息缓存
• 表单聚焦
• 修一个由 effect 或闭包导致的小 bug

今日验收标准

• 不把 useMemo 当银弹乱用
• 能讲清楚 useRef 为什么更新不会触发渲染
• 能说出“先保证正确，再考虑优化”

Day 6：路由、页面级组织与真实项目结构

目标

把单页练习升级成真正像样的项目。

必学内容

• React Router 基础
• 多页面组织
• 布局组件
• 页面状态与局部状态
• 基础目录设计

你今天必须会

• 配置路由
• 做两个以上页面
• 用 Layout 承载公共结构
• 管理页面切换下的状态和数据

实战任务

把整个项目整理成一个“小型学习管理系统”：

• Dashboard 首页
• Tasks 页面
• Resources 页面
• Stats 页面

今日验收标准

• 路由清晰
• 页面目录清晰
• 公共组件和页面组件职责分开

Day 7：完整项目冲刺 + 总复盘

目标

把知识点真正压进一个完整作品里。

主项目建议

做一个：React 学习作战台 React Learning Dashboard

核心功能建议：

• 学习任务管理
• 每日目标展示
• 资源列表
• 搜索和筛选
• 统计面板
• 本地持久化

可选加分项

• 暗色 / 亮色主题切换
• 拖拽排序
• 标签系统
• URL 查询参数同步
• 接一个公开 API

Web3 方向扩展

如果你想和原本的 Web3 学习路线衔接，Day 7 后可以继续扩展：

• 加一个钱包地址输入框
• 查询 token 列表或 mock 资产数据
• 做一个 Portfolio 页面
• 后续再接 wagmi、viem、ethers

今日验收标准

• 项目能完整运行
• 页面可用，不是 demo 碎片
• 你能自己讲一遍项目结构
• 你能指出 3 个后续可继续重构的地方

推荐项目结构

src/
  components/
    ui/
    tasks/
    resources/
  hooks/
    useTasks.js
    useFetchResources.js
  pages/
    Dashboard.jsx
    Tasks.jsx
    Resources.jsx
    Stats.jsx
  utils/
  data/
  App.jsx
  main.jsx

每天都要做的复盘

每天结束时，固定回答这 5 个问题：

1. 今天最重要的 React 概念是什么？
2. 今天写的代码里，状态放得合理吗？
3. 今天哪个 bug 最能暴露我理解不够？
4. 如果重写一次，我会怎么拆组件？
5. 明天开始前，我最该补的一个点是什么？

这周不要踩的坑

• 不要只看不写
• 不要把所有内容挤在一个组件里
• 不要一上来追求高级状态管理
• 不要见到 Hook 就背 API，不理解触发时机
• 不要把“能跑”误认为“学会”

学完这一周之后怎么接

推荐下一步顺序：

1. React 深入补齐：渲染机制、状态管理、错误边界、性能优化
2. 工程化：ESLint、Prettier、模块拆分、组件规范
3. Next.js
4. TypeScript + React
5. 接 Web3 前端栈：viem、wagmi、钱包连接、链上读取

配套执行文档

我另外在仓库里补了一份执行手册和示例项目记录：

react-week-project-notes.md

后面可以直接基于那份文档继续补代码、补练习和记录每天的进度。