react 和 react native 的开发过程区别
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）或企业内部发布 |