82 lines
1.6 KiB
Markdown
82 lines
1.6 KiB
Markdown
|
---
|
||
|
|
tags: [DEV, REACT, frontend, javascript]
|
||
|
|
create time: 2026-04-17
|
||
|
|
---
|
||
|
|
|
||
|
|
# React前端开发
|
||
|
|
|
||
|
|
## 概述
|
||
|
|
|
||
|
|
React是Facebook开发的用于构建用户界面的JavaScript库。它采用组件化思想,通过声明式编程方式,使得复杂数的逻辑可以轻松维护和扩展。
|
||
|
|
|
||
|
|
## React核心概念
|
||
|
|
|
||
|
|
### 组件化开发
|
||
|
|
- 函数组件与类组件
|
||
|
|
- Props(属性)传递
|
||
|
|
- 组件生命周期
|
||
|
|
- 组件组合模式
|
||
|
|
|
||
|
|
### State管理
|
||
|
|
- useState Hook
|
||
|
|
- useReducer Hook
|
||
|
|
- Context API
|
||
|
|
- 第三方状态管理(Redux, Zustand)
|
||
|
|
|
||
|
|
### 副作用处理
|
||
|
|
- useEffect Hook
|
||
|
|
- 自定义Hooks
|
||
|
|
- 依赖数组管理
|
||
|
|
- 清理函数
|
||
|
|
|
||
|
|
### Hooks生态
|
||
|
|
- useRef: 访问DOM元素
|
||
|
|
- useMemo/useCallback: 性能优化
|
||
|
|
- useLayoutEffect: 同步副作用
|
||
|
|
- 自定义Hooks代码复用
|
||
|
|
|
||
|
|
## 学习路径
|
||
|
|
|
||
|
|
### JavaScript基础
|
||
|
|
- ES6+语法(箭头函数、解构、模块化)
|
||
|
|
- 异步编程(Promise, async/await)
|
||
|
|
- DOM操作与事件
|
||
|
|
- 模块系统
|
||
|
|
|
||
|
|
### React核心
|
||
|
|
- JSX语法
|
||
|
|
- 组件概念
|
||
|
|
- Props与State
|
||
|
|
- 事件处理
|
||
|
|
- 条件渲染与列表渲染
|
||
|
|
|
||
|
|
### 进阶特性
|
||
|
|
- Hooks原理与实践
|
||
|
|
- Context与状态管理
|
||
|
|
- 性能优化
|
||
|
|
- 表单处理
|
||
|
|
- 路由(React Router)
|
||
|
|
|
||
|
|
### 生态工具
|
||
|
|
- 构建工具: Vite, Next.js
|
||
|
|
- UI组件库: MUI, Ant Design, Tailwind CSS
|
||
|
|
- 状态管理: Redux Toolkit, Zustand
|
||
|
|
- 数据获取: React Query, SWR
|
||
|
|
- 测试: Jest, React Testing Library
|
||
|
|
|
||
|
|
## 学习重点
|
||
|
|
|
||
|
|
- React Hooks的深入理解
|
||
|
|
- 组件设计模式
|
||
|
|
- 性能优化技巧
|
||
|
|
- 状态管理选型
|
||
|
|
- 前端工程化
|
||
|
|
|
||
|
|
## 实践建议
|
||
|
|
|
||
|
|
- 从小项目开始,逐步构建复杂应用
|
||
|
|
- 学习React DevTools调试
|
||
|
|
- 关注React官方文档变化
|
||
|
|
- 实践常见的UI场景(表单、表格、图表等)
|
||
|
|
- 学习Next.js等全栈框架
|