《React Native跨平台移动应用开发》读后鬼扯

• 别名：手把手教你学React Native
• 评分：3星
• 做者：阙喜涛
• GitHub：https://github.com/es6rn (本书相关代码主页，非做者本人的)
• 豆瓣：https://book.douban.com/subject/26809232/

这本书和别名写的同样，手把手教你学RN，和不少入门的书籍很类似，按照本书的章节一步一步来，确定对RN的开发会有必定的了解。可是它也一本某些内容注定会落伍的书，由于RN还在不断的更新中，不排除会有破坏性的更新致使某些章节内容在RN最新版下是错误的，这个都是废话。

现实中，Android和iOS两大移动操做系统平起平坐的局面决定了注定会有相似RN这样跨平台移动开发框架的出现,只不过各家实现的思路不一样而已，以ionic，RN，Flutter为表明分别扯一下。

ionic算是个人老冤家了，用它作过项目，我还写了一个入门教程 ionic3-handbook，ionic是基于Angular和Cordova的，它的原理也很简单，Angular开发打包的js代码运行在WebView中，经过Cordova插件与Native进行交互，调用原生功能。Cordova的简化版能够看是大头鬼的开源的项目JsBridge，原理同样，可是前者提供了插件的能力。下图展现了ionic应用内部运行原理。

除了少部分须要分别针对Android和iOS的适配外，真的是作到了Write once，Run anywhere。有Angular开发经验的人很容易上手，写一个简单的APP贼快。 缺点也很明显，性能，仍是性能。由于使用了WebView，占用内存高，性能差。iOS上很流畅，可是在Android中低端机上效果仍是差了点。

RN技术抛开了WebView，利用JavaScriptCore来作桥接，将js调用转为native调用。说的再明白一些，RN会把写的代码打包成一个js文件，RN这个框架会解释这个文件，事件的话就经过Bridge调用原生的事件，UI的话就经过Bridge传递参数给Native，而后Native渲染出对应的原生组件。具体原理见下图：

RN相比ionic的性能要好不少，可是它只能作到Learn once，Write anywhere，学习一套语法和工具，能够开发两个平台上的代码。RN还有一个好处就是热更新，这个对iOS开发者来讲是好事。RN的缺点也很明显，适配代码可能须要维护两套，当没有开源的组件时，本身实现起来花时间不说，还须要写原生的开发人员的配合。

Flutter是谷歌推出的跨平台开发的框架，它既没有采用WebView也没有采用JavaScriptCore，而是本身实现了一个UI框架，底层从 RN 这样桥接原生 UI 组件的方案换成了基于 OpenGL / Vulkan 这样的图形库，直接在系统更底层渲染系统上画UI。这个彻底脱离了原生的组件，对一些效果有很好的控制。原理图以下：

Flutter的缺点就是使用了Dart这个语言，使用的人很少，相对ionic和RN来讲学习须要成本，另外一个是生态暂时还不成熟，先进去的都是踩坑填坑的壮士，好比说闲鱼。

学过Android，ionic，RN后，对如何入门一个移动端开发技术有些心得，我的以为步骤以下：

• 环境配置
• 新建项目和调试工具
• 入口文件
• 数据和事件绑定
• 布局和样式
• 界面跳转
• 生命周期
• 网络请求
• 数据存储
• 权限设置
• 主题风格
• 事件广播
• 适配
• 打包

其余的都是些组件使用等细节或者是更高级的用法了。

再扯回来，全部的组件中我以为最须要花心思的就是List类组件了，两个缘由，一个是大量数据下如何维持性能，保持顺滑，另外一个提供拓展能力知足各类设计。咱们如今经常使用的软件，不少都是信息流的，必然要用到List。RN先是提供了ListView，后来升级为FlatList，是明智之举。能够这么说，没有高性能可拓展List组件的框架不是好框架。

之前没写过React代码，第一次接触RN写界面的时候都懵了，竟然还能够这样，JSX还真是个有意思的东西。RN中我以为一个亮点就是实现了flex布局，这个真心是好用啊，让我想起类当年写Android布局的痛苦岁月，谷歌不整这么一套真的说不过去。

RN中的状态机思惟让我一度陷入拆分组件的痛苦中，在写代码高仿知乎个人这一界面时，拆的我都有点儿崩溃，时时刻刻想把大的组件拆分红小的只负责渲染数据的无状态RN组件。用了React-Redux后，我觉它和RN真的是天做之合啊，还专门花了时间弄清楚他的原理，具体见一幅图明白React-Redux型原理，搞明白以后才发现，真的是框架到处皆发布订阅模式。

这本书不推荐购买，初学者图书馆借一本，照着里面代码写一遍，RN基本上就是入门了。具体项目遇到什么坑，Google一下仍是很容易就解决的。