重温React框架

React 是一个由 Meta（原 Facebook）开源的 声明式、组件化 JavaScript 库，专注于构建高效、灵活的用户界面，核心价值在于 虚拟 DOM 的高效渲染、组件化开发模式 和 单向数据流架构，成为现代 Web 开发的主流选择之一。

---

一、React 的核心设计哲学

1. 声明式编程（Declarative）

• 特点：开发者描述“UI 应该是什么样子”，而非逐步操作 DOM（如 jQuery）。
• 优势：代码更简洁、可预测性强，便于调试和维护。

// 声明式：直接表达 UI 状态
function List({ items }) {
  return (
    <ul>
      {items.map(item => <li key={item.id}>{item.text}</li>)}
    </ul>
  );
}

2. 组件化（Component-Based）

• 原子化设计：将 UI 拆分为独立、可复用的组件（如按钮、表单、页面）。
• 组合模式：通过组件嵌套构建复杂界面，提升代码复用性和可维护性。

// 组件组合示例
function App() {
  return (
    <Layout>
      <Header />
      <MainContent />
      <Footer />
    </Layout>
  );
}

3. 单向数据流（Unidirectional Data Flow）

• 数据传递：父组件通过 props 向子组件传递数据，子组件通过回调函数通知父组件状态变化。
• 状态管理：复杂场景结合 Context API 或 Redux 实现跨组件数据共享。

---

二、React 的核心技术机制

1. 虚拟 DOM（Virtual DOM）

• 工作原理：
  1. 生成虚拟 DOM 树（轻量 JS 对象