react 和 react native 的开发过程区别

发布于:2025-08-03 ⋅ 阅读:(13) ⋅ 点赞:(0)

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-camerareact-native-camera

 

✅ 七、打包发布差异

项目 React React Native
构建命令 npm run build → 生成 dist 静态文件 使用 Expo / Xcode / Android Studio 打包成 APK / IPA
部署平台 阿里云、Vercel、GitHub Pages 等 应用市场(App Store、Google Play)或企业内部发布

 


网站公告

今日签到

点亮在社区的每一天
去签到