介绍

React 是由 Facebook（Meta） 开发的 前端 UI 库，用于构建用户界面，尤其是 单页应用（SPA）。

核心特点：

• 声明式（Declarative）：只需描述界面应该是什么样的，React 会自动更新 UI。
• 组件化（Component-based）：把界面拆分成独立、可复用的组件。
• 虚拟 DOM（Virtual DOM）：高效更新页面，减少真实 DOM 操作，提高性能。

React 不是完整的框架（不像 Angular、Vue），更像 构建 UI 的工具库。

核心概念

组件（Component）

React 的核心构建单元。

分为：

• 函数组件（Function Component） 简单、现代，支持 Hooks。
• 类组件（Class Component） 传统写法，有生命周期函数。

JSX

• JavaScript XML，一种在 JS 中写 HTML 的语法糖。
• JSX 会被 Babel 编译成 React.createElement() 调用。

虚拟 DOM（Virtual DOM）

• React 会维护一个内存中的 DOM 树（虚拟 DOM）。
• 当状态改变时，React 先更新虚拟 DOM，再与真实 DOM 做 差异对比（Diff），只更新需要变化的部分，提高性能。

状态（State）和属性（Props）

• Props（属性）：组件外部传入的数据，只读。
• State（状态）：组件内部管理的数据，可随用户交互变化。

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

  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>加一</button>
    </div>
  );
}

生命周期（Lifecycle）

• 类组件有生命周期函数：componentDidMount、componentDidUpdate、componentWillUnmount。
• 函数组件通过 Hooks（如 useEffect）实现类似生命周期逻辑。

useEffect(() => {
  console.log("组件挂载或更新");
  return () => console.log("组件卸载");
}, []);

Hooks

• React 16.8 引入，允许函数组件使用状态和生命周期逻辑。
• 常用 Hooks：
  • useState：状态管理
  • useEffect：副作用处理（生命周期）
  • useRef：引用 DOM 或变量
  • useMemo / useCallback：性能优化

数据流

单向数据流（One-way Data Flow）：

• 父组件通过 props 传数据给子组件
• 子组件不能直接修改父组件的数据

便于追踪状态变化，减少副作用

生态

React 本身只是 UI 库，但生态非常丰富：

• 路由：react-router-dom
• 状态管理：
  • 本地状态：useState、useReducer
  • 全局状态：Redux、MobX、Recoil、Zustand
• 服务端渲染（SSR）：Next.js
• 静态网站生成（SSG）：Gatsby、Next.js
• 移动端：React Native

优势

1. 组件化：复用性高，维护方便
2. 高性能：虚拟 DOM + diff 算法
3. 生态丰富：路由、状态管理、SSR 等工具齐全
4. 社区活跃：大量开源组件、教程和资源
5. 跨平台：Web、移动端、桌面端都能使用