核心特性
React 的设计哲学和关键技术特性
声明式 UI
描述 UI 应该是什么样子,React 自动处理 DOM 更新。通过 Virtual DOM 和 Diff 算法高效更新真实 DOM。
Hooks 系统
在函数组件中使用状态和生命周期等 React 特性。useState、useEffect、useContext 等 Hook 让组件逻辑更清晰。
并发渲染
React 18+ 引入的并发特性,允许同时准备多个版本的 UI,实现可中断渲染和优先级调度。
Server Components
在服务端运行的组件,零 Bundle 体积,可直接访问后端资源,与客户端组件无缝混合。
生态系统
围绕 React 构建的完整工具链
路由
React Router 是事实标准,TanStack Router 提供类型安全路由,wouter 是轻量替代。
状态管理
从 Redux 到 Zustand、Jotai,再到 Valtio 和 MobX,覆盖从简单到复杂的所有场景。
数据获取
TanStack Query 和 SWR 处理服务端状态缓存,Apollo Client 和 Relay 用于 GraphQL。
UI 组件库
Ant Design 适合中后台,MUI 遵循 Material Design,Shadcn/ui 和 Radix UI 提供无头组件。
表单
React Hook Form 高性能无重渲染,Formik 最流行,React Final Form 订阅式更新。
动画
Framer Motion 提供声明式动画 API,React Spring 基于物理弹簧模型。
全栈框架
基于 React 的全栈开发解决方案
Next.js
最流行的 React 全栈框架,支持 SSR/SSG/ISR/RSC,内置 API 路由、图片优化、中间件等企业级特性。
Remix
专注于 Web 标准的全栈框架,采用嵌套路由和并行数据加载,充分利用 HTTP 缓存。
Gatsby
基于 GraphQL 的静态站点生成器,拥有丰富的插件生态,适合博客和文档站点。
快速入门
import { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<h1>计数: {count}</h1>
<button onClick={() => setCount(c => c + 1)}>
+1
</button>
</div>
);
}