React

用于构建用户界面的 JavaScript 库。由 Meta (Facebook) 开发和维护,以其声明式、组件化和高效的特点,成为全球最流行的前端框架。

2013发布年份
Meta维护方

核心特性

React 的设计哲学和关键技术特性

声明式 UI

描述 UI 应该是什么样子,React 自动处理 DOM 更新。通过 Virtual DOM 和 Diff 算法高效更新真实 DOM。

JSXVirtual DOMFiber

Hooks 系统

在函数组件中使用状态和生命周期等 React 特性。useState、useEffect、useContext 等 Hook 让组件逻辑更清晰。

useStateuseEffectuseMemouseCallback

并发渲染

React 18+ 引入的并发特性,允许同时准备多个版本的 UI,实现可中断渲染和优先级调度。

Concurrent ModeSuspenseTransitions

Server Components

在服务端运行的组件,零 Bundle 体积,可直接访问后端资源,与客户端组件无缝混合。

RSCServer Actions流式渲染

生态系统

围绕 React 构建的完整工具链

路由

React Router 是事实标准,TanStack Router 提供类型安全路由,wouter 是轻量替代。

React RouterTanStack Routerwouter

状态管理

从 Redux 到 Zustand、Jotai,再到 Valtio 和 MobX,覆盖从简单到复杂的所有场景。

Redux ToolkitZustandJotaiMobX

数据获取

TanStack Query 和 SWR 处理服务端状态缓存,Apollo Client 和 Relay 用于 GraphQL。

TanStack QuerySWRApollo

UI 组件库

Ant Design 适合中后台,MUI 遵循 Material Design,Shadcn/ui 和 Radix UI 提供无头组件。

Ant DesignMUIShadcn/uiRadix

表单

React Hook Form 高性能无重渲染,Formik 最流行,React Final Form 订阅式更新。

React Hook FormFormikZod

动画

Framer Motion 提供声明式动画 API,React Spring 基于物理弹簧模型。

Framer MotionReact SpringGSAP

全栈框架

基于 React 的全栈开发解决方案

Next.js

最流行的 React 全栈框架,支持 SSR/SSG/ISR/RSC,内置 API 路由、图片优化、中间件等企业级特性。

App RouterRSCServer Actions

Remix

专注于 Web 标准的全栈框架,采用嵌套路由和并行数据加载,充分利用 HTTP 缓存。

嵌套路由LoaderForm增强

Gatsby

基于 GraphQL 的静态站点生成器,拥有丰富的插件生态,适合博客和文档站点。

GraphQLSSG插件系统

快速入门

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>
  );
}

学习资源

官方文档

包含交互式教程、API 参考和最佳实践。

react.dev/learn →

React GitHub

源代码仓库,可查看源码和参与贡献。

github.com/facebook/react →

Awesome React

社区维护的 React 资源大全。

awesome-react →