React 哲学的核心概念

React 的核心思想是声明式编程，通过组件化构建用户界面。开发者只需描述 UI 在不同状态下的表现，React 负责处理底层 DOM 操作。这种模式将关注点分离，使代码更易维护和扩展。

JSX 的本质与使用

JSX 是 JavaScript 的语法扩展，允许在 JavaScript 中直接编写类似 HTML 的标记。其本质会被 Babel 转译为 React.createElement() 调用：

// JSX 代码
const element = <h1 className="title">Hello</h1>;

// 转译结果
const element = React.createElement(
  'h1',
  { className: 'title' },
  'Hello'
);

JSX 的特点包括：

• 大括号 {} 内可嵌入任意 JavaScript 表达式
• 标签属性使用驼峰命名（如 className 代替 class）
• 必须闭合标签（如 <img />）

组件化设计原则

React 组件分为函数组件和类组件两种形式。现代 React 推荐使用函数组件配合 Hooks：

// 函数组件
function Greeting({ name }) {
  return <div>Hello, {name}</div>;
}

// 类组件
class Greeting extends React.Component {
  render() {
    return <div>Hello, {this.props.name}</div>;
  }
}

组件设计应遵循：

• 单一职责原则：每个组件只负责一个功能
• 组合优于继承：通过 props 组合组件
• 受控与非受控组件：区分状态管理方式

虚拟 DOM 工作原理

虚拟 DOM 是轻量级的 JavaScript 对象，描述真实 DOM 结构。React 的渲染流程分为三个阶段：

1. Render 阶段：创建虚拟 DOM 树
2. Reconciliation 阶段：比较新旧虚拟 DOM（Diffing 算法）
3. Commit 阶段：将差异应用到真实 DOM

Diffing 算法的优化策略：

• 同级比较避免跨层级操作
• 使用 key 属性识别稳定元素
• 组件类型变化时直接重建子树

性能优化实践

基于虚拟 DOM 机制，常见的优化手段包括：

• 使用 React.memo 避免不必要的重新渲染
• 正确设置 key 属性帮助 React 识别元素
• 使用 useMemo/useCallback 缓存计算结果
• 代码分割（React.lazy + Suspense）

// 优化示例
const MemoComponent = React.memo(function MyComponent(props) {
  /* 只有 props 变更时才会重新渲染 */
});

function Parent() {
  const memoizedCallback = useCallback(() => {
    // 回调函数记忆化
  }, [deps]);
}

这种设计哲学使 React 能够高效处理复杂 UI 更新，同时保持开发体验的一致性。