React:用组件和声明式视图构建 Web 与原生界面
React 是用 JavaScript 组件和 JSX 构建 Web、Node 服务端及 React Native 界面的库。
GitHub react/react 更新 2026-11-07 分支 main 星标 252.3K 分叉 51.8K
JavaScript 用户界面 JSX React Native

🧭 决策指南

适合,如果你

  • 你要构建会随数据变化更新的交互式 UI,并希望用 Declarative views 简化调试
    README 的 Declarative 章节说明 React 会按数据变化更新并渲染正确组件
  • 你想在 Existing Project 中逐步加入 React,而不是重写现有技术栈
    README 的 Installation 章节提供 Add React to an Existing Project,并写明可使用任意多少 React
  • 你的产品同时涉及 Node 服务端渲染或 React Native 移动应用
    README 的 Learn Once, Write Anywhere 章节明确提到 Node 与 React Native

不适合,如果你

  • 你的团队不接受 JavaScript 组件逻辑,而项目要求全部逻辑放在模板中
    README 的 Component-Based 章节明确说组件逻辑写在 JavaScript 而不是 templates
  • 你的移动端方案不使用 React Native,且需要 README 已说明的其他移动运行时
    README 仅在 Learn Once, Write Anywhere 章节以 React Native 作为移动应用方案

前置条件

  • 需要 JavaScript,因为 README 将 React 描述为 JavaScript library,且 Component-Based 逻辑写在 JavaScript 中
  • 若采用 README 示例,需要页面存在 id="container" 的 DOM 节点,并使用 react-dom/client 的 createRoot
  • 若做服务端渲染,README 指向 Node;若做移动应用,README 指向 React Native

第一步命令(README 原文)

const root = createRoot(document.getElementById('container'));

要注意

  • JSX 不是强制要求,但 README 示例使用 JSX;不要把示例写法当成唯一 API
    README 的 Examples 章节明确写道 JSX is not required to use React
  • createRoot 示例要求 container DOM 节点,缺少该节点时示例无法按原样渲染
    README 的 Examples 代码调用 document.getElementById('container')
  • README 将 React Native 用于移动应用,但没有展开其原生集成细节
    README 的 Learn Once, Write Anywhere 章节只写明 React Native 可 power mobile apps

替代方案

  • React Native:目标是移动应用,而不是 README 示例中的浏览器 DOM 界面
    Learn Once, Write Anywhere

材料未说明

  • README 未说明支持的浏览器、Node 或 TypeScript 版本
  • README 未说明生产构建工具、打包配置和部署流程
  • README 未提供 React 19.3.1 的性能基准或运行时开销数据
  • README 未说明 Node 服务端渲染的具体 API、数据获取和缓存方式
  • README 未说明 React Native 原生模块、平台版本和应用发布流程
  • README 未说明安全策略、长期支持周期或问题响应时限

💡 深度解析

6
适合 我需要把 UI 库集成到商业 JavaScript 产品中,并希望允许内部改造和二次集成;React 的许可条件是否满足这个约束?
适合读者: 需要遵守 MIT 许可、计划在商业产品中集成 React 的 JavaScript 前端工程师

适合,从项目数据和 README 看,React 采用 MIT License,商业集成、内部改造和二次使用的许可门槛较低。

  • 项目核心数据明确标注 “MIT License”。
  • README 的 License 章节再次说明 “React is MIT licensed”,许可信息在仓库内可直接核对。
  • 项目定位是构建 Web 和原生用户界面的库,因此可以作为产品中的 UI 依赖,而不要求采用某个完整后端或部署体系。
  • 但许可证适配不等于全部合规完成;README 没有说明公司需要保留哪些版权、许可文本或第三方依赖声明。
  • 项目核心数据:license = "MIT License"
  • License:"React is MIT licensed"
  • 项目描述:"The library for web and native user interfaces"
材料未说明:README 未列出商业发行时需要保留的具体版权和许可文本;未说明 React 仓库之外的构建工具、渲染器和第三方依赖各自的许可证要求;具体合规结论仍需结合公司的发行方式和法务政策
适合 我维护一个既有 JavaScript 项目,不能一次性重写全部页面,只想先把一个交互模块改成 React;React 是否适合这种渐进式迁移?
适合读者: 维护既有 JavaScript 页面、希望按功能逐步引入 React 的前端工程师

适合,因为 README 明确支持在既有项目中只使用少量或大量 React,且不要求重写现有技术栈。

  • “React has been designed for gradual adoption from the start”,可以通过 “Add React to an Existing Project” 逐步接入。
  • React 不假设其余技术栈,因此现有 JavaScript 页面可以先保留,新增功能再使用组件和 JSX。
  • 组件可以封装自身状态,再组合成复杂界面,适合先替换边界清晰的交互模块。
  • 但 React 只负责用户界面;路由、数据请求和构建工具仍需由现有项目或其他工具承担。
  • Installation:"React has been designed for gradual adoption from the start"
  • Installation:"Add React to an Existing Project"
  • README:"We don't make assumptions about the rest of your technology stack"
  • 项目洞察:React 是 UI 库而非端到端应用框架
材料未说明:README 未说明 React 与该既有项目的具体构建工具、路由方案和数据层如何集成;未说明局部挂载 React 时的样式隔离、状态共享和页面级错误处理方式
适合 我想使用 JavaScript 和 JSX 构建交互式界面,但不希望 React 强制规定路由、后端和数据请求方案;这种约束下我该选 React 吗?
适合读者: 希望在不引入完整全栈框架的前提下开发新 JavaScript 应用的前端工程师

适合,因为 README 将 React 定义为构建用户界面的 JavaScript 库,而不是强制完整应用架构的框架。

  • README 说 React 不对其余技术栈作假设,因此不会替你规定路由、后端或数据请求实现。
  • JSX 提供类似 HTML 的界面描述语法,并且不是使用 React 的强制要求,团队可以按工具链选择。
  • 组件可以接收属性、管理自身状态并组合,足以覆盖 UI 层的结构和交互。
  • 代价是新应用仍需自行确定路由、数据加载、表单、测试、构建和部署方案;README 的 “Create a New React App” 只指向 JavaScript 工具链,并未定义完整架构。
  • README:"React is a JavaScript library for building user interfaces"
  • README:"We don't make assumptions about the rest of your technology stack"
  • Examples:"JSX is not required to use React"
  • Installation:"Create a New React App"
材料未说明:README 未说明新应用推荐的具体路由、数据请求、表单、测试和部署工具;未说明目标 JavaScript 工具链与 React 19.3.1 的配置和兼容性要求
适合 我需要同时维护 Web 界面和 React Native 原生移动应用,希望复用组件化和状态驱动的开发思路;React 是否适合?
适合读者: 计划用 React Native 构建原生移动应用、同时维护 Web 界面的 JavaScript 工程师

适合复用开发模型,但不应理解为 Web 组件可以无修改地跨平台复用。README 明确把 React 定位为 Web 和原生用户界面的库,并说明 React Native 可用于移动应用。

  • “Learn Once, Write Anywhere” 表明组件、属性、状态和组合方式可迁移到不同宿主。
  • README 明确写出 React 可 “power mobile apps using React Native”。
  • React 不绑定其余技术栈,有利于 Web 与 React Native 分别选择平台所需的导航、样式和构建工具。
  • 但平台控件、DOM、导航和样式存在差异;复用边界通常是编程模型和部分逻辑,而不是所有渲染代码。
  • README:"Learn Once, Write Anywhere"
  • README:"power mobile apps using React Native"
  • 项目描述:"The library for web and native user interfaces"
  • 项目洞察:跨平台复用主要复用组件思想和部分逻辑
材料未说明:README 未说明 Web 与 React Native 之间可直接共享的组件比例;未说明移动端导航、原生模块、样式系统和构建工具的具体选型
适合 我负责一个大型 JavaScript 前端应用,界面包含很多交互状态,当前依赖手动 DOM 操作;我是否应该用 React 重构组件边界和状态更新?
适合读者: 负责大型长期维护型 JavaScript 前端应用、需要拆分复杂交互界面的前端工程师

适合,尤其是需要把复杂界面拆成可组合单元并减少手动 DOM 同步时。React 的声明式和组件化模型直接对应这一约束。

  • README 说明开发者为每个应用状态设计简单视图,React 会在数据变化后更新正确组件,减少逐项操作 DOM 的负担。
  • “Build encapsulated components that manage their own state” 支持把交互逻辑和局部状态封装起来。
  • 组件可以组合成复杂 UI,适合大型界面按功能和责任拆分。
  • 但 React 不会自动解决所有性能问题;状态位置、组件边界和大范围更新仍需由应用设计决定。
  • README:"Design simple views for each state in your application"
  • README:"React will efficiently update and render just the right components when your data changes"
  • README:"Build encapsulated components that manage their own state"
  • 项目洞察:声明式模型并不会自动消除性能问题
材料未说明:README 未说明现有 DOM 代码量、性能瓶颈和可拆分的组件边界;未说明该应用使用的状态管理、测试和构建工具是否已有约束
视情况 我已经使用 Node 做服务端渲染,希望浏览器端和服务端共享 React 的组件模型;React 能否满足这个约束?
适合读者: 使用 Node 服务端渲染复杂 Web 界面的 JavaScript 工程师

视情况:React 支持在 Node 上进行服务端渲染,但 README 没有把完整的 SSR 应用框架、路由或数据加载方案包含进来。

  • README 明确写明 “React can also render on the server using Node”,因此核心渲染模型符合 Node 服务端需求。
  • 声明式视图按应用状态描述界面,组件逻辑可在 JavaScript 中复用,有利于形成统一的 UI 编程模型。
  • React 不假设其余技术栈,团队可以组合自己的路由、数据请求和部署工具。
  • 但是服务端组件、流式输出、客户端注水及缓存边界并非这段 README 的承诺,不能只凭 React 核心库确认完整 SSR 方案。
  • README:"React can also render on the server using Node"
  • README:"Declarative"
  • README:"Component-Based"
  • 项目洞察:服务端渲染通常依赖对应框架、渲染器或平台工具
材料未说明:README 未说明目标 React 版本下使用的 SSR 框架、渲染 API 和 hydration 流程;未说明服务端数据获取、流式渲染、缓存和错误恢复的实现方式

✨ 核心亮点

  • 声明式视图按数据变化更新正确组件,降低调试复杂度
  • 组件可组合并自管状态,逻辑写在 JavaScript 而非模板
  • React 19.3.1 支持 Node 服务端渲染与 React Native 移动应用

🔧 工程化

  • 用 JSX 和 createRoot 将 HelloMessage 渲染到 DOM container
  • 通过 Quick Start、Tutorial 和 Managing State 学习 React
  • 可渐进接入 Existing Project,也能创建新的 JavaScript 工具链

⚠️ 风险

  • README 未给出 Node、浏览器或构建工具版本,兼容边界仍不明确
  • Examples 依赖 id 为 container 的 DOM 节点,不能直接代表服务端渲染配置
  • 移动端能力只指向 React Native,README 未说明原生模块和发布流程

👥 适合谁?

  • 需要构建交互式 Web UI,并愿意用 JavaScript 组织组件状态的团队
  • 已有项目想渐进加入 React,而不是一次重写整套技术栈的开发者
  • 同时关注 Node 服务端渲染或 React Native 移动应用的团队