https://www.bilibili.com/video/BV1nV411Q7RX/?p=2&spm_id_from=pageDriver&vd_source=dea414ee2d39e74f662ceec0edffdf24 <!-- more --> ## RN、Native 和 H5 三种技术的解释 作为一名后端工程师，你在和前端同学合作时听到这些术语，很可能是因为他们在讨论移动端开发（比如 App 开发）的技术栈。这些术语通常出现在移动应用开发的上下文中，分别代表不同的开发方式。下面我基于可靠的搜索结果（来自 CSDN、掘金等技术社区）来简单解释一下它们各自是什么、优缺点，以及在实际项目中的应用场景。它们的主要区别在于开发效率、性能和跨平台能力。 ### 1. **[[RN (React Native)]]** - **是什么？** React Native 是 Facebook（现 Meta）开发的一个开源框架，用于使用 JavaScript 和 React 构建**跨平台原生移动应用**。它不是简单地渲染 Web 页面，而是通过桥接（Bridge）机制将 JS 代码转换为平台的原生组件（如 Android 的 View 或 iOS 的 UIView），从而实现“学一次，到处写”（Learn once, write anywhere）。简单说，就是用 Web 开发者的技能（JS/React）来做接近原生的 App。 - **优缺点：** - **优点**：开发效率高，支持热更新（不用重新发布 App），跨平台（iOS 和 Android 共用大部分代码），社区活跃。 - **缺点**：性能不如纯原生（尤其复杂动画或高负载场景），需要处理桥接开销，可能有兼容性问题。 - **应用场景**：适合中型项目，如二级页面或功能稳定的模块（例如电商 App 的详情页）。知名案例：Facebook、Instagram、Airbnb 等 App 部分功能用 RN 实现。 - **为什么前端同学提到？** 前端开发者熟悉 React/JS，所以 RN 是他们的舒适区，能快速迭代。 ### 2. **[[Native]] (原生开发)** - **是什么？** Native 指的是**平台原生开发**，使用操作系统提供的官方语言和工具直接构建 App。例如： - Android：用 Java/Kotlin + Android Studio。 - iOS：用 Swift/Objective-C + Xcode。 这是一种“纯血统”的开发方式，直接调用系统的 API 和硬件（如摄像头、GPS），没有中间层。 - **优缺点：** - **优点**：性能最佳（接近硬件级别），用户体验流畅，能充分利用平台特性（如推送、指纹解锁）。 - **缺点**：开发成本高（需要分别开发 iOS 和 Android 版本），维护麻烦，不支持热更新（必须通过 App Store 审核）。 - **应用场景**：适合对性能要求高的核心页面，如首页、一级导航或游戏 App（例如微信的核心功能就是 Native 开发的）。 - **为什么前端同学提到？** 这通常是基准对比，前端可能在讨论“RN 是否能替换 Native”时提到，因为 Native 是“金标准”。 ### 3. **[[H5 (HTML5)]]** - **是什么？** H5 是 HTML5 的简称，指使用 Web 技术（HTML、CSS、JavaScript）构建的**网页应用**，常嵌入到 App 中作为混合（Hybrid）模式。例如，通过 WebView（浏览器内核）加载 H5 页面。H5 可以是纯 Web App（如微信小程序的部分实现），或嵌入 Native App 中的活动页。它依赖浏览器引擎渲染，不直接访问原生 API。 - **优缺点：** - **优点**：开发速度快、跨平台（一次开发，多端运行，包括浏览器），易分享（URL 链接），支持热更新。成本低，前端开发者上手容易。 - **缺点**：性能较差（渲染依赖 WebView，动画卡顿），无法深度访问硬件（如相机需桥接），安全性稍低。 - **应用场景**：适合活动页面、营销页或需要快速迭代的内容（如电商的促销 H5 页面、分享链接）。知名案例：很多 App 的“活动中心”就是 H5 实现的，便于动态更新。 - **为什么前端同学提到？** H5 是前端的核心技能（HTML/JS），常用于 Hybrid App，与 RN/Native 对比时讨论“用 H5 够不够”。 ### 三者的对比总结（基于实际开发经验） - **性能排序**：Native > RN > H5（Native 最强，H5 最弱）。 - **开发效率**：H5 > RN > Native（H5 最快，Native 最慢）。 - **跨平台**：RN 和 H5 都支持，Native 不支持（需双端开发）。 - **项目中如何选择？** - 大型 App 往往混合使用：核心用 Native，次要用 RN，活动用 H5（例如 CSDN 博客中提到的一些 App 技术栈）。 - 如果你们的项目是移动端，后端可能需要提供 API 支持（如 RN/H5 调用后端接口），注意兼容性（如 H5 的跨域问题）。 如果这些解释还不够详细，或者你有具体场景（如“RN 如何与后端交互”），可以提供更多细节，我可以再帮你查或解释！（信息基于 2025 年 7 月的搜索结果，技术栈可能随时间更新。） | 主分类 | 子项 | |--------|------| | 基础概念 | 响应式<br>声明<br>更新<br>计算属性 | | 模板相关 | 模板语法<br>最简模板<br>样式<br>DOM循环<br>点击事件<br>DOM引用<br>条件渲染 | | 生命周期 | 生命周期<br>组件加载时<br>组件卸载时 | | 组件通信 | 组件组合<br>组件Props传参<br>向父组件emit事件<br>Slot插槽<br>Slot插槽内容<br>上下文 | | 表单控件 | 表单输入<br>输入框<br>复选框<br>单选框<br>选择器 | | Web功能 | Web应用特性<br>渲染应用<br>Fetch获取数据<br>路由链接<br>路由管理 | 让我用游戏世界来解释整个前端UI的层级体系，从底到顶： 1. 原生[[HTML]]/[[CSS]]/[JavaScript](JavaScript.md) (最底层) - 就像是游戏里的基础材料(木头、石头、铁块) - 需要从零开始搭建一切 1. [[CSS 预处理器]] (SASS/LESS) - 就像是更好用的工具，比如魔法锤子 - 让你写 CSS 更轻松 1. [[CSS 框架]] (Tailwind CSS/Bootstrap) - 就像是提供了一堆预制的材料块 - 不用自己从头造砖头 1. [[UI组件库]] (Ant Design/Element Plus) - 就像是游戏里已经建好的房子部件 - 直接拿来用的门啊、窗啊之类的 1. 页面模板 - 就像是完整的房子设计图 - 直接照着图纸建就行 1. 低代码/无代码平台 - 就像是游戏里的创意模式 - 拖拖拽拽就能建好东西 所以使用的时候可以： - 完全自己造(用原生) - 用工具造(用框架) - 直接用现成的(用组件库) - 拖拽完成(用低代码平台) 具体用哪个层级，就看你需要多少自由度和愿意花多少时间啦！ --- 上周在优化报价组的排查工具，主要是写一些前端。总结了一下，作为后端开发，写 前端关注两个点就够了：首先是从数据和交互的角度出发，为各种类型的数据选择合 适的组件，其次是从用户体验出发找到合适的样式风格。之前就感觉像饿了么，得物， Instagram 整体风格比较简洁，美团相对就比较乱，在完善工具样式的时候，发现前 面这一普遍类都采用了高饱和度白色背景，小图标，大留白的风格，所以能给人以整 洁干净的感受。 如何 debug？[浏览器 debug](浏览器%20debug.md) [开发者工具](开发者工具.md) [静态内容](静态内容.md) ## 文字版 - [网络@](网络@.md) - 因特网如何工作？ - 什么是 [HTTP 1.1](HTTP%201.1.md) - 浏览器的工作原理？ - DNS 的工作原理 [DNS](DNS.md) - 什么是域名 [域名](域名.md) - 什么是 web 托管服务 - HTML、CSS 和 JavaScript - [HTML](HTML.md) - [CSS](CSS.md) - [JavaScript](JavaScript.md) - 版本控制系统 - [1 最近项目/++Vue学习/github](1%20最近项目/++Vue学习/github) - [Git](Git.md) - web 安全知识 - [HTTPS](HTTPS.md) - [跨域](1%20最近项目/++Vue学习/跨域) - [Content Security Policy](Content%20Security%20Policy) - [OWASP Security Risks](OWASP%20Security%20Risks) - 包管理 - pnpm、[npm](npm.md) 和 yarn 对比与选择 - CSS 前处理 - [Sass](Sass) - [PostCSS](PostCSS) - 构建工具 - 静态检查与格式化 - [Prettier](Prettier) - [Eslint](Eslint) - Task Runners - [npm scripts](npm%20scripts) - Module Bundlers - [vite](vite) - [esbuild](esbuild) - [webpack](webpack) - 选择一个框架 - [React](React) - [Vue3@]([email protected]) - [Angular](Angular) - Modern CSS - [Styled Components](Styled%20Components) - [CSS Modules](CSS%20Modules) - [CSS](CSS.md) 框架 - [Tailwind](Tailwind) - [Bootstrap](Bootstrap) - [Bulma](Bulma) - 应用测试 - [Jest](Jest) - [react-testing-library](react-testing-library) - [Cypress](Cypress) - [Playwright](Playwright.md) - 鉴权策略 - [JWT](JWT) - [OAuth](OAuth.md) - [单点登录](2%20第二大脑/1%20概念/4%20信息与模式/CS/软件工程/安全/登录/单点登录.md) - [Basic Auth](Basic%20Auth) - [Session Auth](Session%20Auth.md) - [PWA - Progressive Web Apps](PWA%20-%20Progressive%20Web%20Apps.md) - [SSR 服务端渲染](SSR%20服务端渲染.md) - [静态网站生成器](静态网站生成器) - [GraphQL](GraphQL) - 移动端应用 - [React Native](React%20Native) - [Flutter](Flutter) - 桌面端应用 - [Electron](Electron) - [Tauri](Tauri) - [Flutter](Flutter) excerpt <!-- more --> ## 前端知识框架图 ### JavaScript - 运行时   - 语法   - 调度   - 语义 - 执行过程（微任务）   - 数据结构   - 类型   - 对象   - 实例   - 应用和机制   - 事件循环   - 微任务的执行   - 宏任务的执行   - 语言的级别执行 ### HTML - 元素   - 文本元素信息   - 语义相关内容   - 链接   - 锚点   - 替换型元素   - 基础   - 表单   - 总结   - 实体   - 命名空间 - 语言   - 语法 - 补充控制 ### CSS - 语言   - [选择器](选择器.md)     - @rule     - 选择器     - 单位 - 功能   - 布局     - 正常流     - 弹性布局     - 网格布局     - 绝对和相对   - 检测   - 文字排版   - 动画   - 交互   - 其他文档 ### 浏览器的实现原理和 API [BOM](BOM.md) - 实现原理   - 解析   - 构建 [DOM](DOM.md) 树   - 计算 CSS   - 渲染、合成和控制 - [DOM](DOM.md) - CSSOM - 事件 - API 组合 ## 组件库 [UI组件库](UI组件库.md) [Echarts](Echarts) ### 前端工程实践 - 性能 - 工具链 - 持续集成 - 持续系统 - 架构与系统库 ### 参考文献 [Frontend Developer Roadmap: Learn to become a modern frontend developer](https://roadmap.sh/frontend)