blog
Egg/前端工程/多端技术

React Native, Hybrid App, H5 简单对比分析

blog - 前端工程, Node/Egg, Flutter/Hybrid/小程序多端技术学习
Date:  2019-10-20
Word Count:  509
Read Times:  2 Min
Read Count: 

原文： https://hubcarl.github.io/blog/2016/08/07/react-native-compare/

learn once write anywhere

What we really want is the user experience of the native mobile platforms, combined with the developer experience we have when building with React on the web.

既保留流畅的用户体验，又保留React的开发效率

一. H5/Hybrid,React Native,Native对比

  1. UI布局：Web布局灵活度 > React Native > Native

  2. UI截面图：React Native使用的是原生组件,可以与Native持平

  3. 动画：React Native动画需求基本满足

  4. 安装包体积：React Native框架打包后(去掉x86 so)，4MB左右

  5. 更新能力: H5/Hybrid > React Native > Native

  6. 维护成本: H5/Hybrid <= React Native < Native

  7. 真机体验：Native >= React Native > H5/Hybrid

  8. React Native上手简单, 框架定制和扩展比Native有些大, 但是具备跨平台能力和热更新能力。

二. React Native优势

  1. 原生应用的用户体验

  2. 跨平台特性,热更新能力,调试方便

  3. 开发人员单一技术栈

  4. 社区繁荣

  5. 适合尝试性,快速满足双平台的App应用

三. React Native劣势

  1. React Native上手简单, 框架定制和扩展成本高

  2. React Native 深入学习成本高(java,Android,JNI,C++,React)

  3. 首次启动和Big ListView 问题

  4. 大型应用后期的维护成本高，在崩溃率，性能优化方面是个比较大的挑战。

四. React-Native 做了什么

  1. React-Native 丢弃了 Webview, 生成的视图是原生Native视图

  2. 复用React，将 Dom 结构的改变通过 diff 算法处理后，由 js 传递给 native 进行底层视图布局。

  3. css-layout引擎，前端可以继续写熟悉的 css 语法，由引擎转化成底层的布局。

  4. 对js暴露底层常用的UI组建, js 层可以直接对这些组件进行布局。

五. 对应前端的开发模式的变化

  1. JSX vs Html

  2. css-layout vs css

  3. ECMAScript 6 vs ECMAScript 5

  4. React-Native vs DOM

六. React Native学习点

  1. React基础知识

  2. Native与JS交互原理

  3. 基本的Android编程知识

  4. 组件使用

  5. Native和JS自定义组件编写

Author: sky
Link: https://easyjs.cn/blog/xcw19a/
yuque: https://yuque.com/easy-team/blog/xcw19a/
Reprint policy: All articles in this blog are used except for special statements CC BY 4.0 reprint polocy. If reproduced, please indicate source sky !
 Previous
Hybrid系列-phonegap android框架详解 Hybrid系列-phonegap android框架详解
原文：https://hubcarl.github.io/blog/2015/04/19/hybrid-phonegap/首先, 来看一下phonegap 初始化流程以及Native 与 JS 交互流程图。说明：socket server模式下, phonegap.js 源码实现的采用1 毫秒执...
2019-10-20 sky
Next 
Flutter iOS 混合工程实践 Flutter iOS 混合工程实践
在 Flutter 混合工程体系 一文中，阐述了Flutter 三种开发模式，在实际业务中搭建持续集成时，我们更希望本地开发使用混合模式，持续集成使用解耦模式， 主要是解决以下两个问题： 混合模式：开发调试方便，包括热更新， Native 与 Flutter 开发源码断点调试 解耦模式：不侵入...
2019-10-20 sky