React 和 React Native 雖然都使用 React 思想和語法（函數組件、Hooks、JSX 等），但在 開發流程、渲染機制、UI 組件、樣式處理、運行平臺 等方面有明顯差異。以下是對比總結：
?
? 一、開發目的和平臺不同
| 對比項 | React | React Native |
|---|---|---|
| 應用類型 | Web 應用（瀏覽器） | 移動 App（iOS / Android） |
| 渲染目標 | HTML + CSS | 原生組件（View、Text 等） |
| 運行環境 | 瀏覽器 | 手機系統（通過 JS Bridge） |
?
? 二、UI 組件不同
React 使用的是 DOM 元素，React Native 使用的是原生組件：
| 功能 | React (Web) | React Native (App) |
|---|---|---|
| 容器 | <div> | <View> |
| 文本 | <p> / <span> | <Text> |
| 圖片 | <img src="" /> | <Image source={...} /> |
| 輸入框 | <input /> / <textarea /> | <TextInput /> |
| 按鈕 | <button> | <TouchableOpacity> / <Pressable> |
| 表單校驗 | AntD、Form 表單等 | Formik、react-hook-form 等（配合使用） |
?
? 三、樣式寫法不同
| 項目 | React（Web） | React Native（App） |
|---|---|---|
| 樣式語言 | CSS / SASS / styled-components | JS 對象（StyleSheet.create） |
| 單位 | px、rem、% 等 | 沒有單位，默認就是 dp（設備無關像素） |
| 支持的樣式 | 基于 CSS 全面支持（動畫、偽類等） | 樣式屬性有限，不支持如 hover 等特性 |
| 響應式布局 | 媒體查詢 + vw/vh 等 | Flex 布局 + Dimensions 響應式方案 |
示例對比：
// React Web
<div className="box">Hello</div>
<style>.box { color: red; padding: 10px; }
</style>// React Native
<View style={{ color: 'red', padding: 10 }}><Text>Hello</Text>
</View>
? 四、開發調試方式不同
| 對比項 | React | React Native |
|---|---|---|
| 啟動方式 | npm start → 瀏覽器訪問 | 使用 Expo 或 RN CLI → 手機/模擬器運行 |
| 預覽方式 | 瀏覽器 | iOS / Android 真機 or 模擬器 |
| 調試方式 | 瀏覽器 DevTools | Chrome DevTools / React Native Debugger / Flipper |
| 熱更新 | HMR（瀏覽器自動刷新） | Fast Refresh（設備自動刷新） |
?
? 五、三方庫和生態不同
| 內容 | React | React Native |
|---|---|---|
| UI 庫 | AntD / MUI / TailwindCSS 等 | React Native Elements / NativeBase 等 |
| 路由 | React Router | React Navigation |
| 狀態管理 | Redux / MobX / Zustand 等 | 同上，但注意需適配原生組件 |
| 網絡請求 | Axios / Fetch | Axios / Fetch / plus 網絡狀態監聽庫 |
| 動畫庫 | Framer Motion / GSAP | Reanimated / react-native-animatable |
?
? 六、常見開發差異總結
| 開發項 | React | React Native |
|---|---|---|
| 頁面跳轉 | React Router | React Navigation |
| 表單處理 | AntD Form / react-hook-form | Formik / react-hook-form（自適配 RN） |
| 文件上傳 | <input type="file" /> | 需使用原生模塊（ImagePicker、DocumentPicker） |
| 通知權限 | 瀏覽器原生通知 | 原生模塊（如 react-native-push-notification） |
| 調用攝像頭等硬件 | 基本不涉及 | 需使用原生模塊（如 expo-camera、react-native-camera） |
?
? 七、打包發布差異
| 項目 | React | React Native |
|---|---|---|
| 構建命令 | npm run build → 生成 dist 靜態文件 | 使用 Expo / Xcode / Android Studio 打包成 APK / IPA |
| 部署平臺 | 阿里云、Vercel、GitHub Pages 等 | 應用市場（App Store、Google Play）或企業內部發布 |
?
