本文最后更新于267 天前，其中的信息可能已经过时，如有错误请发送邮件到1986413837@qq.com
感谢一众AI大人的支持……
Phase 1：核心基础（1-2 周，目标：能用 React 基础语法构建页面）
第 1-3 天：React 核心语法入门
- 学习 JSX 语法规则（变量插值、条件渲染、列表渲染、事件绑定）
- 掌握函数组件基础写法（组件命名、导出导入、基本结构）
- 理解 Props 传递逻辑（父传子、Props 类型限制、默认 Props）
- 完成小练习：用 JSX + 组件 + Props 写一个 “用户卡片列表”（含 3 个以上卡片，展示姓名 / 头像 / 标签）
第 4-7 天：核心 Hooks 攻坚（重点）
- 掌握 useState 用法（状态声明、更新方法、复杂状态（对象 / 数组）更新）
- 吃透 useEffect 核心逻辑（副作用执行时机、依赖数组规则、清除副作用）
- 解决 useEffect 常见问题（闭包陷阱、重复执行优化）
- 完成实战：用 Vite + React 重构 Vue 版 TodoList（需实现增删改查、状态持久化到 localStorage）
第 8-10 天：基础项目复盘与查漏
- 检查 TodoList 代码规范（组件拆分合理性、Hooks 使用规范性）
- 补充学习：React 组件生命周期与 Hooks 对应关系
- 用 React DevTools 调试 TodoList，查看组件渲染状态
Phase 2：进阶与状态管理（1-2 周，目标：掌握复杂状态管理和路由）
第 1-3 天：更多 Hooks 与性能优化
- 学习 useContext（创建上下文、Provider 传递、useContext 消费）
- 掌握 useReducer（ reducer 函数编写、状态更新逻辑、与 useState 适用场景对比）
- 理解 useCallback/useMemo（缓存函数 / 值的原理、避免不必要重渲染的场景）
- 完成小练习：用 useContext+useReducer 实现 “主题切换 + 用户信息全局共享” 功能
第 4-6 天：状态管理与路由
- 学习 Zustand（创建 store、组件中使用、异步状态处理）或 Redux Toolkit（切片、store 配置、dispatch 调用）
- 掌握 React-Router v6 核心用法（路由配置、嵌套路由、动态路由、编程式导航、路由守卫）
- 完成实战：为 TodoList 增加路由（首页 / Todo 列表 / 关于页），用 Zustand/RTK 管理全局待办状态
第 7-14 天：UI 库集成与后台页面开发
- 熟悉 Ant Design 或 MUI 基础组件（布局组件、表单、表格、按钮）
- 搭建后台管理界面框架（侧边栏、顶部导航、内容区域布局）
- 完成核心页面：用户管理列表（含表格展示、分页、搜索功能）
- 优化性能：用 useCallback/useMemo 优化列表渲染，用 React DevTools Profiler 验证效果
Phase 3：项目实战（2-3 周，目标：产出高质量简历项目）
第 1 天：项目规划与技术选型确认
- 确定项目方向（如个人博客、电商后台、任务管理系统）
- 梳理核心功能模块（列出 3-5 个核心页面及功能）
- 确认技术栈细节：Next.js（13+ App Router 或 Pages Router）、TypeScript 配置、TanStack Query 版本
- 绘制页面原型（简易版，明确组件层级和交互逻辑）
第 2-5 天：项目基础架构搭建
- 初始化 Next.js + TypeScript 项目，配置 ESLint/Prettier
- 搭建目录结构（pages/components/store/api/utils/styles）
- 封装公共工具（请求工具（结合 TanStack Query）、权限工具、格式化工具）
- 定义 TypeScript 核心类型（API 响应类型、组件 Props 类型、全局状态类型）
第 6-12 天：核心功能开发
- 开发页面 1（如博客首页：文章列表、分类导航、搜索）
- 开发页面 2（如文章详情页：内容渲染、评论区、点赞功能）
- 开发页面 3（如后台管理：文章发布表单、富文本编辑器集成）
- 集成 TanStack Query：处理接口请求、缓存、加载 / 错误状态展示
- 用 Zustand/RTK 管理全局状态（如用户登录状态、主题配置）
第 13-15 天：项目优化与部署
- 功能测试：排查 bug（如路由跳转、表单提交、数据展示问题）
- 性能优化：图片优化（Next.js Image 组件）、代码分割、首屏加载优化
- 兼容性处理：适配不同屏幕尺寸（响应式布局）
- 部署项目到 Vercel（配置环境变量、绑定自定义域名可选）
- 完善项目文档（README 写清楚技术栈、功能说明、启动步骤）
第 16-21 天：项目复盘与亮点提炼
- 梳理项目难点及解决方案（如 “如何用 TanStack Query 处理并发请求”）
- 总结技术选型理由（如 “为什么用 Next.js 而非纯 React”“Zustand 相比 RTK 的优势”）
- 录制项目演示视频（1-2 分钟，展示核心功能和交互）
Phase 4：面试准备（持续进行，贯穿全周期）
日常积累（每天 15-30 分钟）
- 复习核心概念：每天 1 个知识点（如 Virtual DOM 原理、Diff 算法、Fiber 架构、Hooks 实现原理）
- 刷面试题：每天 2-3 题（聚焦 React Hooks、状态管理、性能优化、TypeScript 方向）
- 记录项目问题：开发中遇到的技术难点及解决思路，整理成面试素材
面试前 1-2 周集中准备
- 完善简历：突出 React 技术栈、项目亮点（量化成果，如 “首屏加载提速 30%”）
- 准备项目复盘话术：清晰讲解项目背景、技术选型、个人负责模块、难点突破
- 模拟面试：练习 “为什么从 Vue 转 React”“React 和 Vue 的核心差异” 等问题
- 整理技术栈总结：提炼 “React + TypeScript + Next.js + TanStack Query + Zustand” 的技术闭环优势
- 准备反问问题：如 “团队目前 React 技术栈版本？”“实习中会参与哪些类型的项目模块？”
学习了JSX必须知道的三个规则
学习了props语法
学习了如何添加样式
学习了如何给元素添加事件
学习了useState的基本用法
const [friends, setFriends] = useState([‘Alex’, ‘John’])
使用set函数修改状态值
了解了useEffect的基本用法
useEffect(() => {
console.log(‘Count changed:’, count);
}, [count])
了解了React的Portal方法 但是你知道的并不常用!
不能在条件语句/循环语句/嵌套函数中调用useEffect
原因: React核心机制
React 内部使用一个
链表
来跟踪和管理组件中的所有 Hook。每次组件渲染时，它都会按照严格的顺序调用所有的 Hooks（如 useState, useEffect 等）
了解了Prop Drilling代码问题
ContextAPI可以解决这个问题
对于需要共享数据或函数到多个组件的情况非常有用
const handleCopy = () => {
navigator.clipboard.writeText(inputValue).then(() => {
setCopied(true)
setTimeout(() => {
setCopied(false)
}, 2000);
})
}
复制输入框内容操作
学习了useContext()
学习了useReducer()
const [state, dispatch] = useReducer(reducer, initialState)
定义初始状态 (initialState)
定义 reducer 函数：一个纯函数，接收 (state, action) 返回新状态
派发动作 (dispatch)：发出一个描述“发生了什么”的动作对象
Reducer 处理：根据动作类型更新状态
学习了useRef()
提供了一个访问 和 与DOM元素交互的方式
学习了useId()
用于为组件生成唯一ID
FC 是 Function Component 的缩写，是 React 中一个常用的类型别名
学习了TS 这里可以另外开一篇文章讲述
学习了TS在React中的应用
使用Reart-Hook-Form
学习了useMemo 和 useCallback
学习了React_Router
学习了zustand — React 状态管理