React Native与原生关系理解与对比

00关系理解

ReactNative与原生的关系.png

这个是我对RN和原生关系的理解。简单解释下这个图。

RN js编写完业务代码后,通过react-native bundle命令,将代码分别编译成一个index.ios.bundleindex.android.bundle文件,当然还是资源文件。然后放到AndroidiOS的原生工程里,通过黄色说明块里的示例代码,将js写的所有逻辑业务读成一个View来展示在原生里,当然这个View需要Activity/Fragment/ViewController来承载。然后原生App打开相应承载的页面就可以看到RN写的业务了。所以,正常情况下,对于原生来说,所有的RN页面都是在一个原生页面里的。

顶部还有有个node_modules,它其实在工程里是一个文件夹,里面存放了所有的jsAndroidiOS都需要的一个共同类库以及源码,所有的通信、组件都在这个里面。所以,三个工程里都需要读这个文件夹里的东西,但是我们不用关心具体,这个是由npm来自动下载的。只需要安装文档提示配置好这个文件夹的路径就ok了。

01性能问题

这里,我的理解是,性能一定不如纯原生写的。

关于RN写出来的应用的性能问题其实一直都是所有开发人员所关心的问题。RN一直说的是全都是调用的是原生的控件,所以理论上和原生写的App是不存在性能差异的。

原生封装的控件,在RN这边以组件的方式来使用。我有一篇文章以WebView为例讲述了一下原生控件和RN组件的关系(React Native Android从源码看WebView 没有OverrideUrl解决办法,以及高度自适应)。用RN调用的所有组件的属性参数都是经过了jsjava/objective-c/swift的转换后,才最终渲染成原生封装的控件。而控件在运行中的事件回调也是经过了语言通信,才将信息回调给js。我对语言通信这一块的性能耗时不太了解,但是应该可以肯定的是,本来直接就可以完成的事情,经过了语言转换,肯定是有损耗的。只是Facebook把这个性能做了很大的优化,再加上现在手机硬件的性能越来越强大,所以,在大部分手机上这个损耗可以忽略。

02我认为的缺点

  • 能做的事情不如原生灵活。我前面说过,RN用的组件虽然是原生控件,但是是经过原生封装过的控件,有一定的局限性。为了做到跨平台,他并没有把原生该控件的所有属性参数回调都暴露给js端。

  • 坑会比原生开发更多。原生开发,特别是Android有很多适配问题要考虑,这些大部分都是经验才能解决的坑,facebook开发人员在封装控件的时候如果没遇到过相关的坑,可能会解决的不彻底,而js那边如果不了解原生的话,可能不能完全明白问题出在哪了。所以,原生会遇到的坑,如果facebook没解决,理论上RN都会遇到。

  • 技术栈会要求更高。这个是肯定的,最好是Android/iOS都要有点了解,这样写出来的应用才会更健壮。设计js与原生通信的方案通用性才会更强。问题的排查也会更准确。

03我理解的优点

最后我才来说优点,是因为虽然有前面的确定,但这个技术本身肯定是值得学习和发扬的。

  • js与原生的通信机制比较完善。注意我说的是比较完善,实际编码过程中还是有很多不如意的地方。但是满足绝大部分业务需求是没问题的。

  • 可以支持自定义原生控件给RN用。前面我说到,原生封装的控件如果不能满足你的业务需求,你可以自己封装控件,并选择性的暴露接口给RN用,当然这个适用于较为复杂的业务需求,如果大部分都控件都需要重新封装,还不如直接就原生写了。

  • 支持热更新。这无疑是比较重要的一个优点了,开始我就提到,对于原生了来说,重要的是js编译的bundle文件,而热更新的方案也就可以从这点入手。将bundle文件和资源文件打成包,当成一个普通的文件下载,然后让原生指定读取路径就可以了。当然这个需要原生支持。

  • 跨平台。这也是一个非常重要的有点了。但是打包iOS,还是需要必须的硬件配置,比如mac电脑。

  • 可以让更多的前端开发人员来写App。

04

至此!
感谢阅读!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,242评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,769评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,484评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,133评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,007评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,080评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,496评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,190评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,464评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,549评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,330评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,205评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,567评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,889评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,160评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,475评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,650评论 2 335

推荐阅读更多精彩内容