react
声明式 UI 库，Facebook 开源，统治 Web/移动端前端生态
加载项目详情…
本应用为开源项目，仅供学习研究，请遵守其开源协议。
微信扫码咨询客服
POMOAI — 让开源 AI 即刻运行
声明式 UI 库，Facebook 开源，统治 Web/移动端前端生态
加载项目详情…
本应用为开源项目，仅供学习研究，请遵守其开源协议。
图1：React 官方 Logo
想象一下：你开了一家快餐厅，菜单上只有一样东西——完美的汉堡。这家店不卖薯条、不卖饮料，但它把"汉堡"做到了极致。顾客想吃汉堡，第一个想到的就是它。这就是 React 在前端世界的位置。
2013年，Facebook（当时的Meta）工程师 Jordan Walke 在内部黑客马拉松中创造了 React。最早是为了解决 Facebook 广告管理后台的复杂交互问题——一个页面可能同时存在几十个动态区域，传统的"操作DOM"方式让代码变成了一团乱麻。Jordan Walke 把 PHP 的 HTML 模板语法（XHP）移植到 JavaScript，发明了 JSX，让代码可以像"描述 UI"一样直观。
这个项目最初叫 "FaxJS"，内部代号为 "Project Lightning"。2013年5月，Jordan Walke 在 JSConf US 上正式开源了 React，演讲标题是《Rethinking Web App Development at Facebook》。当时会场里很多人对 JSX 持怀疑态度——"在 JavaScript 里写 HTML？这不是违反关注点分离吗？"
但时间证明了它的价值。
React 的核心理念可以浓缩为一个词：声明式。
打个比方：你去奶茶店点单，命令式就像你亲自走到柜台后面，告诉店员"先倒200ml茶底、加三勺奶盖、再放两勺糖、摇20秒、倒进中杯……"。声明式则是你只说"一杯招牌奶茶，少糖"。
在 React 中，你不需要手动操作 DOM（document.getElementById、appendChild 等），只需要描述"在某个状态下，UI 是什么样子的"。React 会自动算出需要做什么更新，保证界面始终与你的描述一致。这种方式让代码逻辑更清晰，也更容易调试——你只需要关注"状态变了，UI 应该是什么样"，而不是"怎么一步步改 DOM"。
React 还提出了一个深刻观点：UI 是数据的函数。即：UI = f(data)。给同样的数据，无论何时渲染，结果都是一样的。这让 React 应用的行为变得可预测、可测试。
React 19 是 2024 年发布的重大版本，带来了一系列让开发者欢呼的改进。
Actions（动作）：这是 React 19 最实用的新功能之一。以往处理表单提交，开发者需要手动管理 pending 状态、错误处理、成功回调。Actions 让这一切变得优雅——你只需要把一个异步函数传给 <form>、<button> 或 useFormStatus，React 自动帮你管理 pending 状态、乐观更新（Optimistic Updates）和错误边界。
React Server Components（RSC）：服务端组件让你可以在服务端运行组件，只把渲染结果发送到客户端。这意味着你可以直接在组件里访问数据库、文件系统，而不需要额外的 API 层。组件默认是服务端组件（Server Component），需要交互的才标记为客户端组件（Client Component）。
use 钩子：这个新 API 允许在组件内部"读取" Promise、Context 和可迭代对象，而且可以放在条件语句里，这是传统 Hooks 无法做到的。它大大简化了数据获取的代码复杂度。
Ref as Prop：以前Refs必须通过 useRef 创建并作为 prop 传递，React 19 允许直接传递 DOM ref 属性，使用更自然。
React 采用了 Monorepo 架构，整个仓库用 Yarn Workspace 管理 39 个子包。核心包包括：
协调器（Reconciler）是 React 的心脏。React 16 引入的 Fiber 架构将协调过程拆分成可中断的工作单元，每个" fiber node" 代表一个组件实例及其更新优先级。这让 React 可以在渲染过程中暂停、优先处理高优先级更新（如用户输入），再继续低优先级工作（如数据请求后的重渲染）。
React 19 引入的 React Compiler（原名 React Forget）是一个重大突破——它是一个 Babel 插件，能自动分析代码中的 state 变化，自动插入 useMemo、useCallback，甚至自动将 mutation 代码转换为 immutable 模式。这解决了 React 性能优化中最大的痛点：手动 memoization 既繁琐又容易出错。
React 之所以如此成功，不仅仅是因为它本身优秀，更因为围绕它形成了一个庞大的生态系统：
Next.js（Vercel）是最流行的 React 全栈框架，支持 SSR、SSG、ISR、App Router，以及开箱即用的 React Server Components。Remix（现已停止独立运营，合并入 React Router）则代表了另一种全栈理念——渐进增强、Web 标准优先。Gatsby 专注于静态站点生成，Astro 则支持 React 作为其中一种渲染引擎。
在 UI 组件库领域，Material UI（MUI）、Ant Design、Chakra UI、Radix UI 都是成熟的解决方案。shadcn/ui 开创了"不作为 npm 包发布组件源码，而是直接复制粘贴到项目中"的新范式，引发了社区热烈讨论。
移动端方面，React Native 让 React 开发者可以用 JavaScript 编写真正的原生 iOS/Android 应用。Meta 的 Facebook、Instagram，Microsoft 的 Teams、Skype，Discord 的移动端都基于 React Native。
前端 UI 框架江湖三足鼎立：React、Vue、Svelte。
Vue 以其渐进式设计和优秀的官方文档著称，上手曲线比 React 平缓很多，适合中小型项目。Svelte 则在编译时做文章——它把"响应式"编译成普通 JavaScript，运行时体积最小、性能最好，但生态相对年轻。
React 的优势在于：规模化的生态和社区积累。全世界有无数第三方库、教程、招聘需求围绕 React 展开。Vue 和 Svelte 可能在某些维度更优秀，但 React 的"网络效应"让它很难被撼动。
另一个不可忽视的优势是 React Native。对于需要同时覆盖 Web 和移动端的项目，React 团队提供了无缝的技术迁移路径——同一套 React 哲学，同一套 Hooks API，写 Web 用 react-dom，写 App 用 react-native。这种跨平台能力是 Vue 和 Svelte 无法比拟的。
React 也有它的批评者。
学习曲线：JSX、Hooks 规则、闭包陷阱、Props drilling、Context 性能问题……React 入门容易，但精通很难。很多新手在理解"为什么我的 Effect 执行了两次"这件事上花费了大量时间。
过度灵活性："React 没有约束，你可以用任何方式做事情"既是优势也是劣势。相比 Vue 的约定优于配置，React 项目往往因为团队风格不同而产生巨大的代码质量差异。
更新节奏："React 18 还没完全用上，React 19 就来了"的吐槽声从未停止。Suspense 的 API 在正式版中变化了好几次，让很多早期采用者感到困惑。
Bundle 体积：React + ReactDOM 在 gzip 后约 40KB，比 Preact（约 4KB）和 Solid.js（约 7KB）重很多。虽然差异对大多数应用影响不大，但在极致性能敏感的场景下，这是开发者会考虑的因素。
245,000 颗星星，让 React 成为 GitHub 历史上最受欢迎的 JavaScript 项目之一。但数字背后的意义更值得深思。
React 重新定义了前端开发的思维方式。"声明式 UI"的概念渗透到了几乎所有现代 UI 框架中——Vue 借鉴了它，Svelte 借鉴了它，Angular 借鉴了它，甚至 Flutter、Riot.js、Omi 等非 JavaScript 框架也深受影响。
React 也开创了"巨型科技公司开源核心基础设施"的先河。Facebook 不仅是 React 的创造者，也是最大的使用者，这种"吃自己的狗粮"（Dogfooding）的实践让 React 在真实生产环境中的稳定性和扩展性得到了充分验证。
React 的许可证风波（从 BSD+Patents 到 MIT）虽然一度引发社区担忧，但最终化解，也体现了 Meta 作为开源社区公民的责任感。
对于 AI 爱好者，React 就像是"构建智能界面的乐高积木"。如果你对 AI 应用的可视化感兴趣，了解 React 能帮助你理解很多 AI 产品的前端是怎么构建的。
对于 AI 开发者，React 生态中有大量与 AI 结合的工具：Vercel AI SDK、LangChain + React、Vercel v0、Cursor/Windsurf 等 AI IDE 都基于 React 构建。掌握 React，意味着你能更快地把 AI 能力产品化。
入门资源推荐：React 官方教程（react.dev）是最权威的起点，交互式代码编辑器让零基础用户也能立即上手。追求系统学习的可以配合《React 实战》书籍，资深开发者则可以深入阅读 React 源码仓库中的 CLAUDE.md——是的，React 团队甚至为 AI 编程工具写了专门的开发指南。