整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
目：在APP的开发过程中，我们经常会听到说“这个页面用Native做，那个页面用H5做……”那么这两者有什么区别呢，产品设计时又需要注意些什么？
考核点
面试App产品的时候，可能会问到。考察面试者的基本功
答题思路
技巧：分类分点回答即可
思路：从开发成本、性能、版本发布、流量等角度来阐述
答题模板
1️⃣两种页面简单解释
Native（原生页面）：是我们传统意义上的软件，使用我们大家熟悉的iOS和Android系统框架语言编写。
H5：用浏览器中的Html语言框架进行开发，相当于网页。
2️⃣开发成本的区别
Native开发成本高：需要针对iOS和Android平台分别开发适配
H5开发成本低：跨平台，相对Native，H5开发成本低。
3️⃣性能的区别
Native页面运行速度快，比较流畅。
H5页面相对Native的运行性能低，特别是一些动画效果有明显卡顿。
4️⃣版本发布的区别
Native页面的修改要重新发布，重新审核，周期长。iOS应用市场审核难度高，Android应用市场又比较多。
H5页面的修改 可以随时上线，不用等待审核
5️⃣流量使用的区别
H5比Native更费流量，H5除了加载html还要加载js、css这些资源文件，相比Native网络加载速度慢。
6️⃣其他
Native能很好的使用设备底层功能，如摄像头、方向传感器、重力传感器等。
H5有所限制。比如Android里的H5对摄像头和方向传感器就需要再多做一些处理。再比如不想用系统默认的手机相册样式，就要用原生来开发了。
7️⃣产品设计注意点
核心框架结构最好用Native开发
需要频繁切换的页面最好用Native开发，因为H5存在加载进度条。如果使用H5开发，用户在频繁切换的过程中，会不停地等待加载，体验较差。
Native页面可以做出流畅的转场动效，利用好这一点以提升APP的交互感受。
活动页等临时性强，变化快的页面，最好用H5开发，更新速度快，成本低。
采用H5开发时，产品设计上尽量减少对系统组件的调用。
H5页面上尽量减少图片，并且严格控制图片大小，开发时需要采用异步加载等策略。
需要pmp学习资料的可以找我要
们看一下React Native和React.js，它们的架构，使用和编码样式重叠和不同。请继续阅读！
React是Facebook，Instagram和知名开发人员社区的支持者，是目前使用最多的JavaScript库之一。根据Libscore的说法，目前React正在许多知名网站上使用，例如Netflix，Airbnb，Walmart，HelloSign和Imgur，仅举几例。
React.js开发与React本机移动应用程序开发没有任何相似之处，它们都有不同的用途。该博客将解释这两个PL之间的所有主要差异，并将为您提供一种方法来为您的特定项目选择一个。
React.js和React Native之间的区别
React.js是一个JavaScript库，而React Native是一个移动应用程序开发框架
React.js是一个JavaScript库，可帮助企业创建漂亮的用户界面。React.js的一个主要特性是它可以在客户端执行，此外，它可以在服务器端呈现，并且它们可以一起工作，可以互操作。它广泛用于构建高性能Web应用程序和UI。
但是，React Native是一个移动应用程序开发框架，使用React.js构建移动应用程序。它允许您从声明性组件构建丰富的移动用户界面。React Native移动应用程序开发提供了Hot Reloading等功能，可以更快地开发应用程序，并且工作量更少。2015年，Facebook发布了React Native库，将React架构提供给原生的Android，iOS和Windows应用程序。
两者都以不同的方式提高开发人员的效率
React.js专注于为其组件提供出色的性能以及完全管理的渲染周期，从而提高开发人员的效率。通过以更简单的方式设置可重用部件的分发，创建和利用，它使开发人员有更多机会利用和进行基本抽象。它被证明对于可点击按钮等较低级别的部件以及下拉列表等较高级别的部件非常有用。
React Native提供了相同的好处，但采用了不同的方法。React Native中的构建块是可重用的本机组件，可直接编译为本机。使用React，您在Android或iOS中使用的组件在React中具有相应的组件，因此您将获得相同的外观和感觉。这种基于组件的结构使您可以更快地创建应用程序。该应用程序将具有本机移动应用程序的外观，速度和功能，这使得React Native与其他移动应用程序开发框架不同。
React.js利用虚拟DOM，而React Native使用本机API
React.js利用虚拟DOM创建更好的用户体验。DOM构造需要时间，因为DOM树今天很大。但是，React.js通过利用虚拟DOM设法更快地执行此过程。因此，React.js利用文档对象模型的抽象副本，并将更改推广到一个组件，而不会影响UI的其余部分。这使得React.js在快速更新和创建动态UI方面非常棒。
React Native更进了一步。它利用本机API呈现可在iOS和Android平台上重用的UI部件。所以它真正做的是它利用Java API来呈现Android组件和Objective-C API来编写iOS组件。然后它利用JavaScript组成代码的剩余部分，为每个平台个性化应用程序。这为React Native移动应用程序提供了最大的组件可重用性和代码共享性。
React.js改进了你的Web应用程序的SEO，而React Native则是关于UI的
React.js的设计考虑了搜索引擎优化。它利用Node在用户的服务器上进行渲染。类似的工具确实提供了这种服务器的渲染观点，但是，它们需要大量不稳定的黑客攻击和大量的开发人员支持来维护。
另一方面，由于React Native不用于网站，它与SEO无关。它专注于构建移动UI。与其他移动应用程序开发框架相比，React Native完全以UI为中心，使其更像是一个JavaScript库而不是一个框架。由此产生的UI非常敏感。这意味着应用程序将比普通混合应用程序具有更快的加载时间，并且具有更平滑的感觉。
React.js结合了技术，而React Native的代码可以与任何现有的应用程序结合使用
React使用HTML和JS遵循它们一直聚集在一起的规则。这个想法更加突出，包括CSS，它解决了CSS开发中发现的一系列问题，例如全球命名空间和变量/范围隔离。
另一方面，React Native为希望向现有应用添加更多但不想更改整个应用程序代码的企业提供了机会。您可以将React Native组件添加到现有应用程序的代码中。或者，如果您当前的混合应用程序是使用Ionic和Cordova制作的，请使用插件有效地重用基于Cordova的代码。
此外，React.js使用HTML和CSS，而React Native则不使用。React.js使用和，而React Native分别使用和。这是一个显示相同的示例：
对于React.js：
function tick() {
const element = (
<div>
<p>Hello, world!</p>
</div>
);
ReactDOM.render(element, document.getElementById('root'));
}
setInterval(tick, 1000);
对于React Native：
import React, { Component } from 'react';
import { Text, View } from 'react-native';
export default class HelloWorldApp extends Component {
render() {
return (
<View>
<Text>Hello world!</Text>
</View>
);
}
}
导航：React.js和React Native的不同方法
这是一个角度，他们两个采用不同的方法，但结果相当颈部和颈部。React.js中的Web应用程序利用React-router进行导航，而React Native则有一个完全独特的库导航器。
021 年，跨平台程序员之间关于 React Native 和 Flutter 的旷日持久的争论越来越白热化了。前几年，React Native 还是开发人员的首选框架，但是自 2017 年 Flutter 发布以来，其已经发展成为 React Native 的一个强有力竞争对手。
最近，随着许多初创公司选择了 Flutter 用于 MVP 开发，React Native 正在面临来自 Flutter 的激烈竞争。那么问题来了，哪种应用开发技术将在 2021 年取得成功呢？
1. 热重载 = 快速编码
Flutter 允许开发人员使用一种更复杂、更快速的方式来创建应用程序。这是 Flutter 的最大优势之一，也是所有顶级移动应用开发公司都颇为看重的。
开发人员可以实时对代码库做出改进，并立刻看到这些改进反映在请求中。这就是所谓的“热重载”特性，更改通常只需几毫秒就能显示出来。
这一功能让团队可以快速添加功能、修复错误和测试新想法。此外，当团队需要通过协作来加快开发速度时，热重载用起来非常顺手。
2. 适用于多个移动平台的单一代码库
Flutter 允许开发人员为两个应用只编写一个代码库——一个针对 iOS，另一个针对 Android。因为 Flutter 具有自己的模板和布局，它的操作系统无关的平台意味着开发人员可以在两个不同的系统上使用相同的功能，同时保持每个应用都有自己独特的样式、可用性和功能。
Flutter for Web 是由谷歌开发的，为开发人员提供了必要的信誉保障。一旦应用程序上线，就可以用单个代码库支持 Android、iOS 和 Web 平台。
3. 与 React Native 相比，需要的测试只有一半
由于你将在两个平台上测试相同的程序，因此质量保证流程做起来会快得多。我们编写了的自动化测试量只有一半，因为在两个平台上可以编写相同的测试，这样就最大程度地减少了质量检查团队的工作量。
但是，由于你的质量检查专家必须手动检查每台设备上的应用，因此需要进行与原生编程相似级别的手动测试。
1. 快速刷新 = 快速编码
它具有与 Flutter 相同的特性。热重载加快了开发过程，并允许程序员将新代码直接插入正在运行的应用程序中。这样开发人员无需重新构建应用程序即可立刻看到改进。
热重载可以保留应用程序的状态，并避免了在完全重载期间丢失它的风险（就基于状态的框架而言，这是一大优势）——这进一步加快了移动应用程序成长的速度。
2. 一个代码库，两个移动平台（甚至更多！）
就像 Flutter 一样，你只需编写一个代码库即可运行两个应用程序，一个跑在 Android 上，一个运行在 iOS 上。更好的一点是，因为用的是 JavaScript，所以你在开发跨平台应用程序时可以和 Web 应用共享代码。你只需使用可对特定平台编译的抽象模块即可。
请参阅以下示例，了解可让你同时在 iOS 和 Android 及其他系统（包括 Web 和桌面应用）上编程的库：
React Native for Web 是一个跨平台应用，支持 Android、iOS 和 Web（Twitter 使用它来创建 Twitter Lite）。
ReactXp——Skype 开发的一个应用，支持 Android、iOS、互联网和 Windows 10（UWP）。
微软团队为所有 Windows 10 用户（PC、平板电脑、二合一、Xbox、混合现实设备等）创建了 React-native-windows。
React Native 程序员对事物的看法和采取的行动与大多数人是不同的。
你可以假设 Web 桌面应用、移动 Web 应用和原生应用都具有相同的业务逻辑，但是它们需要不同的 UI 才能满足不同的用户需求。
3. 它使用了流行的编程语言——JavaScript
React Native 使用的是 JavaScript 这种常用的编程语言，而 Dart 尚不为人所知。如果你是喜欢统计数据的开发人员，也可以使用 TypeScript（一个 JavaScript 的超集）。
4. 开发者的选择自由
开发人员可以使用 React Native 开发跨平台应用程序。
优势在于，React Native 允许你根据项目需求和开发人员的偏好来精确选择要使用的解决方案。
例如，如果开发人员需要处理全局状态（如何在单个应用程序中存储和管理多个组件使用的数据），则他们可以使用自定义用户界面库或编写自己的用户界面库；他们可以使用库路由器，或在 JavaScript 和 TypeScript 做出选择。
对很多人来说，Flutter 比 React Native 更难学习。React Native 在开发人员中很流行，因为它使用了 JavaScript 这种著名的编程语言。因此，如果你是 Dart 的新手，学习 Flutter 的时间可能比学习 React Native 的时间更长。但反之亦然：如果你以前曾用过 Dart，那么学习 Flutter 将会很容易。
由于 React Native 中的组件非常简单，因此设置它们的样式时你必须付出很多工作。只有少数几个模块可以识别平台，并且几乎都需要为 iOS 和 Android 应用不同的特性，或者设置不同的样式。
另一方面，Flutter 将组件视为小部件，此外，这些小部件基于 Material Design，所以可以高度自定义。大多数小部件都是自适应的，这意味着它们可以同时在 Android 和 iOS 上使用。
Flutter 在性能方面具有优势，因为它可以编译为 ARM 或 x86 原生资源，因此非常快。
React Native 只是原生方法的包装，也就是说它架起了一座桥梁，将某些调用转换为原生 API；当存在许多原生调用时，这就会成为瓶颈。
React Native 没有转换为原生代码，它还有 JavaScript 层，而渲染这些代码的性能要比 Flutter 低。这里有一些解决方法，但是 Flutter 就用不着操心这些，因为视图层就像游戏一样简单——而且，由于 Flutter 工程师构建了所有组件，因此对桥梁的原生调用更少，因为它们只是原生视图的包装。
使用 React Native 组件将无法获得足够的自定义能力。因此，如果有人选择不包装一个进程，就无法使用它（例如，视图周围的虚线框将不起作用）——并且来自谷歌和苹果的新组件需要很长时间才能出现在 React Native 中。
React 的 bug 修补也开始需要更长的时间。例如边界破裂问题，以及支持不同风味的问题，等等。大多数 React Native 公司正在制作定制的分叉来修复上游未修补的 bug。Flutter 开发人员更加谨慎，修复往往很快。到最后你可能把大部分时间花在 React Native 文档中，查找各种问题，试图找出事情没有按预期进行的原因。
我们希望本文中的信息能帮助你确定以下问题的答案：“Flutter 还是 React Native，哪个更好？”就一般共识而言，谷歌的 flutter 将继续作为 SDK 存在，并且可能在未来几年内取代 React Native 的地位。如果在未来技术的重要性变得更大，那么在选择最佳解决方案的同时紧跟趋势是非常重要的。
原文链接：
https://hackernoon.com/flutter-vs-react-native-what-to-choose-in-2021-ik1n35ta?source=rss
*请认真填写需求信息，我们会在24小时内与您取得联系。
