跨平台能力：Web / 移动端 / 桌面端统一技术体系

React 的设计理念中有一句广为流传的口号：“Learn Once, Write Anywhere”（一次学习，随处编写）。这并非说同一套代码可以直接跑在所有平台上，而是指 React 的核心开发模式、组件化思维、状态管理、数据流处理方式在不同平台上保持高度一致，开发者只需要学习一套思维体系，就能在不同终端高效开发。

1. React DOM：浏览器的基石

React 最基础、最常用的渲染目标是浏览器 DOM。通过 React DOM 包，虚拟 DOM 树被转换为真实的 HTML 元素，运行在任何现代浏览器中。这是 React 应用最广泛的场景，也是学习 React 的起点。

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

function App() {
  return <h1>Hello, Web!</h1>;
}

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

2. React Native：原生移动端开发

React Native 将 React 的声明式 UI 模型映射到 iOS 和 Android 的原生组件。开发者使用 JavaScript/TypeScript 编写界面逻辑，React Native 在底层将 <View>、<Text> 等组件翻译为平台对应的原生控件（UIView、TextView 等），从而实现真正的原生渲染，而非 WebView 套壳。

它与 Web 开发的共通点：

相同的组件化思想：函数组件、Props、State、Hooks 完全一致。
相同的状态管理方案：Redux、Zustand 等可直接复用。
相同的数据请求逻辑：Axios、TanStack Query 照常使用。

需要额外学习的内容：

平台特定组件：<View>、<Text>、<ScrollView> 等替代 HTML 标签。
样式系统：使用 StyleSheet.create() 实现类似 CSS 的样式，但不完全等价于 CSS。
原生能力：摄像头、地理位置等通过 React Native 桥接或 Expo 提供的 API 调用。

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

function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Hello, Mobile!</Text>
    </View>
  );
}

对于需要同时维护 Web 端和移动端业务的企业，React + React Native 的组合可以共享大量业务逻辑（如数据校验、状态流转、用户认证），只需分别实现 UI 层，大幅降低开发和维护成本。

3. Electron + React：桌面端应用

Electron 允许使用 Web 技术构建跨平台桌面应用（Windows / macOS / Linux）。React 作为 UI 层可以无缝集成到 Electron 中，开发者可以用 React 编写整个桌面应用的界面，同时通过 Electron 的 API 调用系统级能力（文件读写、托盘图标、原生菜单等）。

许多知名桌面应用的前端都使用 React，例如 VS Code 的部分面板、Discord、Slack 等。对于前端工程师来说，这意味着无需学习 C++/C# 等传统桌面开发语言，就可以构建功能完整的桌面软件。

4. React Three Fiber 等特殊渲染目标

由于 React 的虚拟 DOM 本质上是一个与平台无关的描述结构，社区甚至将其扩展到了 3D 渲染、终端 UI 等领域。例如 React Three Fiber 允许你用 React 组件的方式描述 Three.js 的 3D 场景，思维完全一致。

统一技术体系的真正价值

这种跨平台能力带来的最大收益是团队能力复用和人才流动：

一个会 React 的 Web 开发者，可以较快上手机动端或桌面端开发，学习和迁移成本远低于掌握一套全新的技术栈。
项目中大量非 UI 的业务逻辑（Hooks、工具函数、类型定义）可以在 Web、移动端、桌面端之间共享，减少重复劳动。
当产品需要从单一平台扩展到多平台时，技术积累不会被推翻重来，而是持续沉淀。

React 的这种设计使它不仅是一个 UI 库，更是一套跨端 UI 开发的通用方法论——你学会的是如何用声明式、组件化的思想去描述用户界面，至于这个界面最终渲染到浏览器、手机还是桌面，只是渲染器层面的不同而已。