React 学习指南
一、什么是 React？
React 是由 Facebook（现 Meta）开发并维护的前端 JavaScript 库，用于构建用户界面（UI），尤其适合开发复杂的单页应用（SPA）。
其核心特点包括：
组件化开发：将 UI 拆分为独立可复用的组件
声明式编程：只需描述 UI 应该是什么样子，而非如何实现
虚拟 DOM：通过内存中的虚拟节点提升渲染性能
单向数据流：使应用状态管理更可预测
二、学习前的准备
- 前置知识
HTML/CSS/JavaScript 基础：熟悉 ES6+ 语法（箭头函数、解构赋值、模块等）
npm/yarn 包管理工具：了解依赖安装、脚本运行等基本操作
浏览器开发者工具：熟悉 Console、Elements、Sources 面板的使用
- 开发环境搭建
安装 Node.js（包含 npm）
验证安装
node -v
npm -v
创建 React 项目（推荐使用 Vite 或 Create React App）
方法 1: 使用 Vite（更快）
npm create vite@latest my-react-app -- --template react
cd my-react-app
npm install
npm run dev
方法 2: 使用 Create React App
npx create-react-app my-react-app
cd my-react-app
npm start
- 推荐编辑器配置
VS Code 必备插件：
ES7+ React/Redux/React-Native snippets（代码片段）
Prettier - Code formatter（代码格式化）
ESLint（代码质量检查）
Auto Rename Tag（标签自动同步修改）
三、核心概念学习路径
- 基础概念
JSX 语法：JavaScript 与 HTML 的融合写法
// 示例：JSX 基本用法
function App() {
return
Hello, React!
;
}
组件：
函数组件（推荐）
类组件（了解即可）
Props 与 State：
Props：父组件向子组件传递数据
State：组件内部状态管理（使用 useState 钩子）
2. 常用 Hooks
useState：管理组件状态
useEffect：处理副作用（数据请求、订阅等）
useContext：跨组件数据传递
useRef：获取 DOM 元素或保存可变值
3. 状态管理
基础：组件内部状态 + Props 传递
进阶：Context API + useReducer
复杂应用：Redux 或 Zustand（轻量级替代方案）
4. 路由管理
使用 react-router-dom 实现页面跳转：
npm install react-router-dom
- 数据请求
常用库：axios 或 fetch API
示例：
import axios from 'axios';
function UserList() {
const [users, setUsers] = useState([]);
useEffect(() => {
axios.get('https://api.example.com/users')
.then(res => setUsers(res.data))
.catch(err => console.error(err));
}, []);
return (
{users.map(user => (
- {user.name}
))}
);
}
四、推荐学习资源
- 官方文档
React 官方文档（最新、最权威）
Create React App 文档
- 视频教程
B 站：尚硅谷 React 教程、黑马程序员 React 教程
YouTube：React for Beginners (by Wes Bos)
- 实战项目
初级：Todo List、计数器、天气应用
中级：电商首页、博客系统、音乐播放器
高级：全栈应用（结合 Node.js/Express 后端）
- 进阶学习
React 性能优化（React.memo、useMemo、useCallback）
自定义 Hooks 开发
TypeScript 与 React 结合
React 18 新特性（并发渲染、自动批处理等）
五、常见问题与解决方案
组件不渲染？：检查是否返回 JSX、是否有语法错误
状态更新后视图不刷新？：确保使用 setState 方法更新状态，而非直接修改
Props 传递错误？：使用 console.log 或 React Developer Tools 调试
依赖冲突？：删除 node_modules 和 package-lock.json 后重新安装
六、学习计划建议
第 1-2 周：掌握 JSX、组件、Props、State 基础用法
第 3-4 周：学习 Hooks、条件渲染、列表渲染
第 5-6 周：实践路由管理、数据请求、状态管理
第 7-8 周：完成一个完整项目（如电商网站）并优化
七、资源链接汇总
React 官方文档
React Router 文档
Axios 文档
Vite 文档
React 开发者工具（浏览器插件）
