React：现代 Web 开发的基石

React（也称为 React.js 或 ReactJS）是由 Meta（原 Facebook）开发并开源的 JavaScript 库，专门用于构建用户界面（UI），尤其是单页应用（SPA）中的复杂交互式组件。自 2013 年发布以来，React 已成为全球最流行的前端技术之一，被 Netflix、Instagram、Airbnb、Discord 等科技巨头广泛采用。

一、React 的核心思想

1. 组件化（Component-Based）

React 将 UI 拆解为独立、可复用的“组件”。每个组件管理自己的状态和逻辑，像搭积木一样组合成完整应用。
✅ 例如：一个电商页面 = <Header /> + <ProductList /> + <ShoppingCart />

2. 声明式编程（Declarative）

开发者只需描述“UI 应该是什么样子”，React 会自动高效地更新和渲染 DOM。
✅ 对比：传统命令式（“先找元素→再改内容→再加样式”） vs React（“直接返回新 UI”）

3. 虚拟 DOM（Virtual DOM）

React 在内存中维护一个轻量级 DOM 副本，计算变更差异后批量更新真实 DOM，极大提升性能。

二、React 的关键特性

特性	说明
JSX	允许在 JavaScript 中写类似 HTML 的语法（如 `<div>Hello {name}</div>`），让 UI 结构更直观。
状态管理（State）	通过 `useState`、`useReducer` 等 Hooks（函数式组件）或 `this.state`（类组件）管理动态数据。
单向数据流	数据从父组件通过 props 向下传递，确保数据流向清晰、可预测。
生态系统强大	配套工具链成熟：React Router（路由）、Redux/Zustand（状态管理）、Next.js（服务端渲染框架）等。

三、React 适合做什么？

✅ 动态 Web 应用：社交媒体、仪表盘、管理后台
✅ 跨平台开发：通过 React Native 构建 iOS/Android 原生应用
✅ 高性能交互界面：实时聊天、数据可视化、游戏 UI
✅ 渐进式增强：可仅用于页面局部（如评论区），无需重写整个网站

四、一个极简示例

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>你点击了 {count} 次</p>
      <button onClick={() => setCount(count + 1)}>
        点我 +1
      </button>
    </div>
  );
}

export default Counter;

👉 这段代码创建了一个可交互的计数器组件——状态变化自动触发 UI 更新，无需手动操作 DOM。