038_尚硅谷react教程_生命周期(旧)_组件挂载流程_哔哩哔哩_bilibili
2026-05-02 start
react学习的知识点
阶段 1：前置基础（必须先会）
不学这些，React 根本看不懂
HTML / CSS / JavaScript 基础
ES6+ 核心语法（重中之重）
箭头函数
解构赋值
展开运算符 ...
模板字符串
let / const
数组方法：map / filter / reduce
模块化 import / export
Node.js & npm / yarn（包管理工具）
阶段 2：React 基础核心（必学）
1. JSX 语法
什么是 JSX
JSX 与 HTML 的区别
JSX 中写 JavaScript 表达式 { }
条件渲染
列表渲染（key 的作用）
2. React 组件
函数式组件（现在主流）
组件的拆分与复用
组件嵌套
组件 props（父 → 子传值）
3. React 状态（State）
useState 最核心 Hook
状态不可变（不能直接修改 state）
状态驱动视图更新
4. 事件处理
React 事件绑定
事件对象 e
阻止默认行为、阻止冒泡
5. 样式处理
行内样式
className
CSS Modules
常用样式方案
阶段 3：React 进阶核心（必须掌握）
1. Hooks（React 16.8+ 灵魂）
useState：状态管理
useEffect：副作用（请求、定时器、监听）
useRef：获取 DOM / 保存变量
useMemo：性能优化，缓存计算结果
useCallback：性能优化，缓存函数
自定义 Hooks（封装复用逻辑）
2. 组件通信（高频重点）
父 → 子：props
子 → 父：props + 回调函数
兄弟组件：状态提升
跨多层组件：Context / 状态管理库
3. 表单处理
受控组件
非受控组件
表单数据收集
4. 路由 React Router（做项目必备）
路由安装与配置
路由跳转 Link / useNavigate
动态路由 /user/:id
嵌套路由
路由守卫（权限控制）
5. 网络请求
fetch / axios
useEffect 中发送请求
请求 loading、错误处理
阶段 4：React 工程化 & 状态管理
1. 状态管理（中大型项目必备）
Context + useReducer（轻量）
Redux / Redux Toolkit（主流）
Zustand（简单好用，企业越来越爱）
Pinia 是 Vue 的，React 不用
2. 工程化
Vite / Create React App 创建项目
环境变量
打包构建
ESLint 规范
3. 性能优化
避免不必要渲染
React.memo
useMemo / useCallback
懒加载 React.lazy
阶段 5：实战 & 企业常用
UI 组件库：Ant Design / Element Plus / Tailwind CSS
表单库：Formik / React Hook Form
接口请求封装
权限管理
本地存储end