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 响应式方案 |
示例对比:
javascript
// 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)或企业内部发布 |