React.js 怎么学

学习 React.js 应该遵循一套由浅入深、理论结合实践的路径。不要试图一次性掌握所有概念，建议按照以下路线图进行学习：

第一阶段：预备知识（地基）

在直接学习 React 之前，确保你对以下 JavaScript 核心概念已经掌握，否则学起来会非常吃力：

1. ES6+ 语法：这是 React 开发中最常用的语法。
   • 解构赋值 (Destructuring)：const { name } = props;
   • 展开运算符 (Spread Operator)：... (用于复制数组或对象)
   • 箭头函数 (Arrow Functions)：() => {}
   • 模板字符串 (Template Literals)：Hello ${name}
   • 导入/导出 (Import/Export)：模块化开发
   • 数组方法：map, filter, reduce (React 中渲染列表必用 map)
2. HTML & CSS：基本的标签和样式布局能力。
3. Node.js 环境：了解如何安装 Node.js 和使用 npm/yarn 包管理器。

第二阶段：React 核心概念（主体）

这是 React 的骨架，必须完全理解：

1. JSX 语法
   • 理解 JSX 不是 HTML，它是 JavaScript 的语法扩展。
   • 学习如何在 JSX 中嵌入表达式、如何写 className（而不是 class）、如何闭合标签。
2. 组件 (Components)
   • 函数组件 (Functional Components)：现代 React 的主流写法。
   • 类组件 (Class Components)：了解即可，能看懂老代码就行，新项目基本不用写。
3. Props (属性)
   • 理解组件之间如何通过 props 传递数据（父传子）。
   • 学习 props 的解构和默认值。
4. State (状态)
   • 理解 useState Hook。
   • 区分 props（只读）和 state（可变）。
   • 理解“状态提升”的概念。
5. 事件处理 (Event Handling)
   • 学习 React 中的事件绑定（如 onClick, onChange）。
   • 注意 this 指向问题（在 Hooks 中通常不存在）。
6. 条件渲染与列表渲染
   • 使用三元运算符或 && 进行条件渲染。
   • 使用 map() 渲染列表，并理解 Key 的重要性。

第三阶段：React Hooks 深入（进阶）

Hooks 是现代 React 的灵魂，必须熟练掌握：

1. 基础 Hooks
   • useState：管理状态。
   • useEffect：处理副作用（数据获取、订阅、手动修改 DOM）。这是难点，要理解依赖数组。
2. 其他常用 Hooks
   • useRef：获取 DOM 元素或存储跨渲染周期的可变值。
   • useContext：跨组件层级传递数据（避免 props 层层传递）。
   • useMemo & useCallback：性能优化（了解何时使用）。
   • useReducer：复杂状态逻辑的管理（类似 Redux 的简化版）。

第四阶段：路由与数据管理（工程化）

当组件多了，你需要管理页面跳转和全局数据：

1. React Router (路由)
   • 学习 BrowserRouter, Routes, Route, Link, Navigate。
   • 实现单页应用（SPA）的页面跳转。
2. 状态管理工具
   • 初学者：先掌握 Context API 即可。
   • 进阶：学习 Zustand (推荐，简单) 或 Redux Toolkit (复杂，但生态好)。
3. API 数据请求
   • 学习如何使用 fetch 或 axios 请求后端接口。
   • 推荐学习 React Query (TanStack Query)：它是目前处理服务器状态的最佳实践，能极大简化代码。

第五阶段：构建工具与生态（实战）

1. 构建工具
   • 学习使用 Vite (现在的主流，速度快) 或 Next.js (基于 React 的全栈框架，正在成为行业标准)。
2. UI 组件库
   • 为了提高开发效率，学习使用成熟的 UI 库，如 Ant Design (Antd), Material UI (MUI), 或 Tailwind CSS (原子化 CSS 框架)。
3. TypeScript
   • 现代 React 开发几乎离不开 TypeScript。学习如何为 props 和 state 定义类型。

学习资源推荐

1. 官方文档（首选）
   • React 官方文档：2023年后的新文档非常优秀，包含交互式练习，强烈推荐以此为主。
2. 视频教程
   • B站/YouTube：搜索 “React 2024 教程”。
   • 推荐：技术胖、coderwhy、或前端小智的视频教程。如果要学实战，推荐找带有“后台管理系统”或“电商项目”标签的全栈课程。
3. 书籍
   • 《React 实战》、《React 学习之道》。

学习路线图总结

实战建议

不要只看不练。

1. Todo List：经典的入门项目，涵盖增删改查。
2. 天气应用：调用第三方 API，练习异步请求。
3. 仿写项目：尝试仿写一个简易的抖音/微博首页，练习复杂布局和组件拆分。

一句话建议：直接上 React 18 + Vite + TypeScript 技术栈，不要去学已经被淘汰的 create-react-app 和 class component 的老写法。