React 是一个由 Meta（原 Facebook）开发的开源 JavaScript 库，用于构建 用户界面（UI），尤其是针对具有复杂交互的单页应用（SPA）。
📌 React 是什么？
React 是一个用于构建 UI 的声明式、组件化前端库。
它的核心是：
- 组件：将 UI 拆分成可复用的模块。
- 声明式编程：你只需要描述“界面长什么样”，React 会帮你处理 DOM 的操作。
- 虚拟 DOM：在内存中维护一个 DOM 的副本，对比后最小化操作真实 DOM，提升性能。
🎯 React 解决了什么问题？
| 问题 | React 的解决方式 |
|---|---|
| ❌ 传统 JS 操作 DOM 繁琐、易错 | ✅ React 抽象出虚拟 DOM，让你只关注“界面状态” |
| ❌ 多页面开发状态难以共享 | ✅ React 推动**单页应用（SPA）**发展，组件管理状态 |
| ❌ 模板与逻辑分离过于生硬（如 jQuery + HTML） | ✅ 使用 JSX 将结构与逻辑整合，更自然 |
| ❌ 大型项目缺乏 UI 模块化能力 | ✅ React 强调组件化开发，便于复用与维护 |
| ❌ 前端状态管理混乱 | ✅ 结合状态管理库（如 Redux、Zustand）形成成熟体系 |
🧱 React 的核心概念
| 概念 | 说明 |
|---|---|
| 组件 | 页面构成的最小单元，可复用（函数组件、类组件） |
| JSX | JavaScript 与 HTML 的混合语法糖，最终编译成 JS |
| 虚拟 DOM | 用 JS 对象模拟真实 DOM，实现高效 diff |
| Hooks | 函数组件中管理状态与副作用的 API，如 useState、useEffect |
| 状态（state）与属性（props） | 组件通信与交互的关键机制 |
✨ 举个例子：React 和传统开发的区别
👎 传统开发（jQuery）：
|
1 2 3 4 |
$('#btn').on('click', function () { $('#text').text('Hello'); }); |
👍 React 方式：
|
1 2 3 4 5 6 7 8 9 10 |
function App() { const [text, setText] = useState(''); return ( <div> <button onClick={() => setText('Hello')}>Click</button> <p>{text}</p> </div> ); } |
✅ 总结一句话：
React 通过组件化 + 虚拟 DOM + 声明式语法，大大简化了构建复杂前端应用的过程，让 UI 开发更高效、更可维护、更现代化。
