React简介 #

一、什么是React #

React 是由 Facebook（现 Meta）开发并开源的用于构建用户界面的 JavaScript 库。它专注于视图层，采用声明式编程范式，让开发者可以轻松创建交互式 UI。

1.1 核心定位 #

text 
React = 声明式 UI 库 + 组件化架构

React 的核心思想：

  • 声明式：描述 UI 应该是什么样子，而不是如何实现
  • 组件化：将 UI 拆分为独立、可复用的组件
  • 一次学习，随处编写：Web、移动端、桌面应用

1.2 核心特点 #

特点 说明
声明式设计 只需描述 UI 状态，React 负责更新 DOM
组件化 构建可复用的组件，组合成复杂界面
一次学习，随处编写 支持 Web、React Native、Electron 等
单向数据流 数据从父组件流向子组件，易于调试
虚拟DOM 高效的 DOM 更新机制
JSX JavaScript 的语法扩展，描述 UI 结构

二、核心概念 #

2.1 虚拟DOM #

虚拟DOM（Virtual DOM）是 React 的核心特性之一：

text 
┌─────────────┐
│   State     │  状态变化
└──────┬──────┘
       ↓
┌─────────────┐
│ Virtual DOM │  生成新的虚拟DOM树
└──────┬──────┘
       ↓ Diff算法
┌─────────────┐
│   Diffing   │  对比新旧虚拟DOM
└──────┬──────┘
       ↓ 最小更新
┌─────────────┐
│  Real DOM   │  只更新变化的部分
└─────────────┘

优势：

  • 减少 DOM 操作次数
  • 批量更新提高性能
  • 跨平台能力

2.2 组件化 #

React 应用由组件构成：

jsx 
function App() {
  return (
    <div>
      <Header />
      <Main>
        <Sidebar />
        <Content />
      </Main>
      <Footer />
    </div>
  );
}

组件特点：

  • 独立性：每个组件管理自己的状态和逻辑
  • 可复用：组件可在不同地方重复使用
  • 可组合：小组件组合成大组件
  • 可测试：独立组件易于测试

2.3 单向数据流 #

React 采用单向数据流：

text 
┌─────────────┐
│  父组件     │
│   Props     │
└──────┬──────┘
       ↓ 单向传递
┌─────────────┐
│  子组件     │
└─────────────┘

数据流动规则：

  • Props 从父组件传递给子组件
  • 子组件不能直接修改 Props
  • 通过回调函数向父组件传递数据

2.4 声明式编程 #

对比命令式与声明式：

javascript 
// 命令式（jQuery风格）
$('#counter').text(count);
$('#button').on('click', () => {
  count++;
  $('#counter').text(count);
});

// 声明式（React风格）
function Counter() {
  const [count, setCount] = useState(0);
  
  return (
    <div>
      <span>{count}</span>
      <button onClick={() => setCount(count + 1)}>
        增加
      </button>
    </div>
  );
}

三、React 18 新特性 #

3.1 并发特性 #

React 18 引入了并发渲染：

javascript 
import { createRoot } from 'react-dom/client';

const root = createRoot(document.getElementById('root'));
root.render(<App />);

3.2 主要新特性 #

特性 说明
Concurrent Rendering 并发渲染，不阻塞主线程
Automatic Batching 自动批处理状态更新
Transitions 区分紧急和非紧急更新
Suspense 改进的数据获取体验
useId 生成唯一 ID

3.3 Transitions 示例 #

javascript 
import { useState, useTransition } from 'react';

function SearchComponent() {
  const [isPending, startTransition] = useTransition();
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);

  const handleChange = (e) => {
    const value = e.target.value;
    setQuery(value);
    
    startTransition(() => {
      setResults(searchResults(value));
    });
  };

  return (
    <div>
      <input value={query} onChange={handleChange} />
      {isPending && <span>搜索中...</span>}
      <Results data={results} />
    </div>
  );
}

四、应用场景 #

4.1 单页应用（SPA） #

text 
适合构建复杂的单页应用程序
- 管理后台
- 电商平台
- 社交应用
- 数据可视化平台

4.2 移动应用 #

React Native 使用 React 构建原生移动应用：

javascript 
import { Text, View } from 'react-native';

function App() {
  return (
    <View>
      <Text>Hello React Native!</Text>
    </View>
  );
}

4.3 桌面应用 #

Electron + React 构建跨平台桌面应用：

text 
知名案例
- VS Code
- Slack
- Discord

4.4 服务端渲染 #

Next.js 等框架支持 SSR：

javascript 
export async function getServerSideProps() {
  const data = await fetchData();
  return { props: { data } };
}

五、与其他框架对比 #

5.1 React vs Vue #

方面 React Vue
学习曲线 较陡峭 较平缓
模板语法 JSX HTML模板
状态管理 Redux/Zustand Pinia/Vuex
生态系统 社区驱动 官方维护
灵活性 高 中等
TypeScript 完善支持 完善支持

5.2 React vs Angular #

方面 React Angular
框架定位 UI库 完整框架
学习难度 中等 较高
TypeScript 可选 必须
数据绑定 单向 双向
适用场景 中小型项目 大型企业项目

5.3 React vs Svelte #

方面 React Svelte
编译时 运行时 编译时
包体积 较大 极小
学习曲线 中等 简单
生态成熟度 成熟 发展中

六、技术栈概览 #

6.1 核心技术栈 #

text 
┌──────────────────────────────────────┐
│              React 18                │
├──────────────────────────────────────┤
│  React Router  │    Redux Toolkit    │
│  (路由管理)    │    (状态管理)        │
├──────────────────────────────────────┤
│  Vite/Webpack  │    Jest/Vitest      │
│  (构建工具)    │    (测试框架)        │
└──────────────────────────────────────┘

6.2 开发工具 #

  • React DevTools：浏览器开发者工具扩展
  • VS Code：推荐编辑器
  • ESLint + Prettier：代码规范工具
  • Vite：新一代构建工具

七、学习路线 #

text 
基础阶段
├── React基础语法
├── JSX与组件
├── Props与State
└── 事件处理

进阶阶段
├── React Hooks
├── 组件通信
├── React Router
└── 状态管理

高级阶段
├── 性能优化
├── 自定义Hooks
├── 高阶组件
└── TypeScript集成

八、总结 #

React 是一款优秀的 UI 库：

  • 声明式：描述 UI，而非操作 DOM
  • 组件化：构建可复用的 UI 组件
  • 高效：虚拟DOM 实现高性能更新
  • 生态丰富：庞大的社区和第三方库

选择 React 的理由：

  • 学习资源丰富，社区活跃
  • 灵活性高，可搭配各种库
  • 就业市场广阔，需求量大
  • 跨平台能力，一套技能多端开发
最后更新：2026-03-26