1. 基本概念
React 是由 Facebook（现 Meta）开发的用于构建用户界面的 JavaScript 库。它采用组件化和声明式的编程范式，让构建复杂的交互式 UI 变得更加简单和可维护。
2. 核心特性
组件化（Component-Based）
- 将 UI 拆分为独立、可复用的组件
- 每个组件管理自己的状态和逻辑
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}声明式（Declarative）
- 描述 UI 应该是什么样子，而不是如何操作 DOM
- React 负责高效地更新和渲染组件
Virtual DOM
- 在内存中创建虚拟的 DOM 表示
- 通过 diff 算法找出变化，最小化实际 DOM 操作
- 提高性能和用户体验
3. 核心概念
JSX
- JavaScript 的语法扩展，让你在 JS 中写类似 HTML 的代码
const element = <h1>Hello, World!</h1>;Props（属性）
- 组件间传递数据的方式，只读的
function Greeting({ name, age }) {
return <p>Hello {name}, you are {age} years old</p>;
}State（状态）
- 组件内部的数据，可以改变
const [count, setCount] = useState(0);生命周期
- 组件从创建到销毁的各个阶段
- 函数组件通过 useEffect 处理副作用
4. Hooks（重要特性）
useState - 状态管理
const [state, setState] = useState(initialValue);useEffect - 副作用处理
useEffect(() => {
// 副作用逻辑
}, [dependencies]);useContext - 跨组件状态共享 useReducer - 复杂状态管理 useMemo/useCallback - 性能优化
5. 单向数据流
- 数据从父组件流向子组件
- 子组件通过回调函数与父组件通信
- 使应用状态更可预测和调试
6. 生态系统
路由 - React Router 状态管理 - Redux、Zustand、Context API UI 库 - Ant Design、Material-UI、Chakra UI 开发工具 - React DevTools 脚手架 - Create React App、Next.js、Vite
7. 优势
学习成本相对较低 - 专注于 UI 层 灵活性强 - 可以渐进式采用 性能优秀 - Virtual DOM 和优化机制 生态丰富 - 大量第三方库和工具 社区活跃 - 持续更新和支持 就业市场好 - 需求量大
8. 适用场景
- 单页面应用（SPA） - 复杂的 Web 应用
- 移动应用 - React Native
- 服务端渲染 - Next.js
- 静态站点 - Gatsby
- 桌面应用 - Electron + React
9. 与其他框架对比
vs Vue
- React：更灵活，JSX 语法，单向数据流
- Vue：更易学，模板语法，双向绑定
vs Angular
- React：轻量级库，学习曲线平缓
- Angular：完整框架，功能全面但复杂
10. 最新发展
React 18 新特性
- Concurrent Features（并发特性）
- Automatic Batching（自动批处理）
- Suspense 改进
- Server Components（服务端组件）