obsidian/DEV/REACT/README.md

tags, create time

tags	create time
DEV REACT frontend javascript	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等全栈框架