react 和 react native 的开发过程区别

最新推荐文章于 2025-08-05 19:02:04 发布

原创最新推荐文章于 2025-08-05 19:02:04 发布 · 615 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#react native #react.js #javascript

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）或企业内部发布