[转]Shared——React Native与原生关系理解与对比
零、关系理解
这个是我对RN
和原生关系的理解。简单解释下这个图。
RN js
编写完业务代码后,通过react-native bundle
命令,将代码分别编译成一个index.ios.bundle
和index.android.bundle
文件,当然还是资源文件。然后放到Android
、iOS
的原生工程里,通过黄色说明块里的示例代码,将js
写的所有逻辑业务读成一个View
来展示在原生里,当然这个View
需要Activity/Fragment/ViewController
来承载。然后原生App
打开相应承载的页面就可以看到RN
写的业务了。所以,正常情况下,对于原生来说,所有的RN
页面都是在一个原生页面里的。
顶部还有有个node_modules
,它其实在工程里是一个文件夹,里面存放了所有的js
,Android
,iOS
都需要的一个共同类库以及源码,所有的通信、组件都在这个里面。所以,三个工程里都需要读这个文件夹里的东西,但是我们不用关心具体,这个是由npm
来自动下载的。只需要安装文档提示配置好这个文件夹的路径就ok了。
一、性能问题
这里,我的理解是,性能一定不如纯原生写的。
关于RN写出来的应用的性能问题其实一直都是所有开发人员所关心的问题。RN
一直说的是全都是调用的是原生的控件,所以理论上和原生写的App
是不存在性能差异的。
原生封装的控件,在RN
这边以组件的方式来使用。我有一篇文章以WebView
为例讲述了一下原生控件和RN组件的关系(React Native Android从源码看WebView 没有OverrideUrl解决办法,以及高度自适应)。用RN调用的所有组件的属性参数都是经过了js
到java/objective-c/swift
的转换后,才最终渲染成原生封装的控件。而控件在运行中的事件回调也是经过了语言通信,才将信息回调给js。我对语言通信这一块的性能耗时不太了解,但是应该可以肯定的是,本来直接就可以完成的事情,经过了语言转换,肯定是有损耗的。只是Facebook
把这个性能做了很大的优化,再加上现在手机硬件的性能越来越强大,所以,在大部分手机上这个损耗可以忽略。
二、我认为的缺点
能做的事情不如原生灵活。我前面说过,
RN
用的组件虽然是原生控件,但是是经过原生封装过的控件,有一定的局限性。为了做到跨平台,他并没有把原生该控件的所有属性参数回调都暴露给js端。坑会比原生开发更多。原生开发,特别是
Android
有很多适配问题要考虑,这些大部分都是经验才能解决的坑,facebook
开发人员在封装控件的时候如果没遇到过相关的坑,可能会解决的不彻底,而js
那边如果不了解原生的话,可能不能完全明白问题出在哪了。所以,原生会遇到的坑,如果facebook
没解决,理论上RN
都会遇到。技术栈会要求更高。这个是肯定的,最好是
Android/iOS
都要有点了解,这样写出来的应用才会更健壮。设计js
与原生通信的方案通用性才会更强。问题的排查也会更准确。
三、我理解的优点
最后我才来说优点,是因为虽然有前面的确定,但这个技术本身肯定是值得学习和发扬的。
js与原生的通信机制比较完善。注意我说的是比较完善,实际编码过程中还是有很多不如意的地方。但是满足绝大部分业务需求是没问题的。
可以支持自定义原生控件给RN用。前面我说到,原生封装的控件如果不能满足你的业务需求,你可以自己封装控件,并选择性的暴露接口给
RN
用,当然这个适用于较为复杂的业务需求,如果大部分都控件都需要重新封装,还不如直接就原生写了。支持热更新。这无疑是比较重要的一个优点了,开始我就提到,对于原生了来说,重要的是
js
编译的bundle
文件,而热更新的方案也就可以从这点入手。将bundle
文件和资源文件打成包,当成一个普通的文件下载,然后让原生指定读取路径就可以了。当然这个需要原生支持。跨平台。这也是一个非常重要的有点了。但是打包
iOS
,还是需要必须的硬件配置,比如mac
电脑。可以让更多的前端开发人员来写App。
作者:Sunny玄子
链接:https://www.jianshu.com/p/d54bed57b262
[转]Shared——React Native与原生关系理解与对比的更多相关文章
- React Native 导入原生Xcode项目总结与记录
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,bi ...
- React Native移植原生Android
(一)前言 之前已经写过了有关React Native移植原生Android项目的文章,不过因为RN版本更新的原因吧,跟着以前的文章可能会出现一些问题,对于初学者来讲还是会有很多疑难的困惑的,而且官方 ...
- React Native Android原生模块开发实战|教程|心得|怎样创建React Native Android原生模块
尊重版权,未经授权不得转载 本文出自:贾鹏辉的技术博客(http://blog.csdn.net/fengyuzhengfan/article/details/54691503) 告诉大家一个好消息. ...
- React Native之原生模块的开发(Android)学习笔记
目录 1.为什么我们需要原生模块开发 2.开发Android原生模块的主要流程 3.原生模块开发实战 1.为什么我们需要原生模块开发? 我们在用RN开发App的时候,有时候需要用到一些原生模块 ...
- React Native与原生项目连接与发布
前面的各种环境配置按照官方文档一步一步来,挺详细,宝宝在这里就不多说废话了. 其次,前面的配置,我参照的这个博主的文章React Native 集成到iOS原生项目 下面是宝宝掉过的坑(半径15M): ...
- React native和原生之间的通信
RN中文网关于原生模块(Android)的介绍可以看到,RN前端与原生模块之 间通信,主要有三种方法: 1)使用回调函数Callback,它提供了一个函数来把返回值传回给JavaScript. 2)使 ...
- 【React Native开发】React Native移植原生Android项目(4)
),React Native技术交流4群(458982758),请不要反复加群!欢迎各位大牛,React Native技术爱好者加入交流!同一时候博客左側欢迎微信扫描关注订阅号,移动技术干货,精彩文章 ...
- react native与原生的交互
一.交互依赖的重要组件 react native 中如果想要调用ios 中相关的方法,必须依赖一个重要的组件nativemodules import { NativeModules } from ' ...
- react native 中的redux 理解
redux 中主要分为三大块,分别是Action Reducer 与Store. 1.Action是js的一个普通对象,是store数据的唯一来源.通过store.dispath()讲action传到 ...
随机推荐
- Flink学习笔记:Operators串烧
本文为<Flink大数据项目实战>学习笔记,想通过视频系统学习Flink这个最火爆的大数据计算框架的同学,推荐学习课程: Flink大数据项目实战:http://t.cn/EJtKhaz ...
- 关于web界面设计的整体可维护性的感悟
1.表现与数据分开管理: 某些数据具备特殊的表现格式,比如颜色,大小等等.为了对这些格式表现分开管理进行 a.使用css定义该类型数据的表现形式: 定义数据的类别,通过该类别对数据格式进行统一定义 . ...
- paraview鼠标选择网格
虽然可以根据ID选择网格,但是有时候需要选择可见面,直接鼠标比较方便,可以直接按一下键盘"S",这时候鼠标变成十字型,然后鼠标左键选择区域.
- leetcode 191:统计1的个数;5 最长回文串;54,59 蛇形矩阵
class Solution { public: int hammingWeight(uint32_t n) { ; //统计次数 ){ n &= (n-); //每次消掉一个1 k++; / ...
- 2019.4.18 HTML + CSS相关整理
目录 标签 块标签 行标签 行块转化 嵌套规则 css引入方式 行间样式 内部引入 外部引入 选择器 基础选择器 组合选择器 盒模型 css样式 字体属性 设置字体的大小 设置字体的粗细 设置字体的风 ...
- laravel5.5打印sql语句
额.其实laravel很不方便的地方就是sql写错之后不是很好调试. 上方法. //DB::connection()->enableQueryLog(); // 开启QueryLog//$rep ...
- 使用app-inspector查看元素,无法连接到手机,提示错误{ Error: Command failed ……forward tcp:9001 tcp:9001错误解决
在学习使用app-inspector查看元素时,碰到一个问题.在cmd窗口执行命令app-inspector --port 5678 -u 85EABNFSU53R --verbose ,连接不到手 ...
- nginx常用配置3
## 六.浏览器本地缓存配置 语法:expires 60 s|m|h|d ```动静分离效果: server { listen 80; server_name localhost; location ...
- 用代码如何检测一个android程序是否在运行
/** * 检测一个android程序是否在运行 * @param context * @param PackageName * @return */ public static boolean is ...
- 利用partial关键字声明分部类和分部方法
一.分部类 1.分部类的定义:简单的说,分部类就是把一个类拆分成多个类,每个类文件只包含其中的一部分,类.结构.接口.方法都可以拆分,在定义的时候加上partial修饰符. 注意:分部类必须属于同一命 ...