React-Native与移动端开发

一时失言乱红尘 2022-11-17 14:58 217阅读 0赞

生活不容易，时常来总结，作为开发者，今天我们来看看`React-Native`与移动端开发的现状

#### 一、常见的开发方式 ####

移动应用开发的方式，目前主要有三种：

*  Native App： 本地应用程序（原生App）
 *  Web App：网页应用程序（移动web）
 *  Hybrid App：混合应用程序（混合App）

对于以上三类开发方式都有各自的优势和劣势，在使用过程中也应该按照自己业务进行具体的选型使用，大致可以按照如此规则进行使用，一般公司App会存在三种技术栈，当然也存在单一类型实现方案的公司，对于三种技术栈的使用，选择合适的技术栈显得尤为重要。Hybrid App和Web App在性能和用户体验方面相比Native和基于Native渲染相对弱一些，所以大部分Web App页面只是用来承载需求变更频繁、需要即时上线的活动页面。Native选型开发时，如果项目是有大量强交互（同时存在2种及以上手势操作），无法用二元函数描述的复杂动效，对用户体验要求极致的页面、同时对于强交互或强动画等，则可以使用Native技术开发。

通过一个表格来展示具体开发的效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1d3UxNTA_size_16_color_FFFFFF_t_70_pic_center]

#### 二、React-Native开发技术栈 ####

React-Native：可以用JSX（JS的语法扩展） 混编js、css、html，只关心如何用 JavaScript 构造页面，它们终将被转换成原生的 JavaScript 并创建 DOM。具有以下特点：

高效：独创了 Virtual DOM 机制。Virtual DOM 是一个存在于内存中的 JavaScript 对象，它与 DOM 是一一对应的关系，也就是说只要有 Virtual DOM，我们就能渲染出 DOM。当界面发生变化时，得益于高效的 DOM Diff 算法，我们能够知道 Virtual DOM 的变化，从而高效的改动 DOM，避免了重新绘制 DOM。
    可预期：react是单向数据流，非双向数据绑定，不直接操作DOM对象，大多数时间只是对 Virtual DOM 进行编程，应用程序的状态（数据）是可以推演出视图的，具备可预期性。
    声明式：组件是React的基础单元，使用React你做的仅仅是构建组件。通过封装，使得组件代码复用、测试以及关注点分离更加容易。

React-Native和 React的编程思路有些不同，React是以WebView（浏览器）为后端，操作Virtual DOM进行视图渲染的，而React-Native是以ios或者anroid原生控件为后端，但以React component 的方式Expose出来进行视图渲染的。

React Native产出的并不是“网页应用”， 或者说“HTML5应用”，又或者“混合应用”。 最终产品是一个真正的移动应用，从使用感受上和用Objective-C或Java编写的应用相比几乎是无法区分的。 React Native所使用的基础UI组件和原生应用完全一致。 你要做的就是把这些基础组件使用JavaScript和React的方式组合起来。

为了更加形象的说明结构状态，我专门绘制了这样一张图片：

##### 2.1 React-Native的原理框架图： #####

我们作为开发者，主要是进行负责React(JS/JSX)阶段的代码编写，而在Virtual Dom这个阶段，是由专门的引擎给我们处理，在最顶层的话，就会是原生组件。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1d3UxNTA_size_16_color_FFFFFF_t_70_pic_center 1]

##### 2.2 React生命周期: #####

说到这里，我们就不得不讲讲React生命周期了，因为我们在React-Native中的生命周期和React生命周期相同，只不过有版本上细微的差异。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1d3UxNTA_size_16_color_FFFFFF_t_70_pic_center 2]  
大家也可以直接戳这里，看看[React生命周期][React]

##### 2.3 React-Native与原生的交互机制 #####

我们都知道 JavaScript 是一种脚本语言，它不会经过编译、链接等操作，而是在运行时才动态的进行词法、语法分析，生成抽象语法树(AST)和字节码，然后由解释器负责执行将字节码转化为机器码再执行。整个流程由 JavaScript 引擎负责完成的，IOS提供了一个叫做 JavaScript Core 的框架，这是一个 JavaScript 引擎。

JavaScript 是一种单线程的语言，它不具备自运行的能力，因此总是被动调用，Objective-C 创建了一个单独的线程，这个线程只用于执行 JavaScript 代码，而且 JavaScript 代码只会在这个线程中执行。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1d3UxNTA_size_16_color_FFFFFF_t_70_pic_center 3]

##### 2.4 交互流程 #####

在 React Native 中，Objective-C 和 JavaScript 的交互都是通过传递 ModuleId、MethodId 和 Arguments 进行的。Objective-C 和 JavaScript 两端都保存了一份配置表，里面标记了所有 Objective-C 暴露给 JavaScript 的模块和方法。这样，无论是哪一方调用另一方的方法，实际上传递的数据只有 ModuleId、MethodId 和 Arguments 这三个元素，它们分别表示类、方法和方法参数，当 Objective-C 接收到这三个值后，就可以通过 runtime 唯一确定要调用的是哪个函数，然后调用这个函数。Objective-C 和 JavaScript 的交互总是由Objective-C发起的。Object-C与js的交互是通过各端的Bridge和ModuleConfig来进行的，实际过程可分为两个阶段：初始化阶段和方法调用阶段。

##### 2.5 方法调用 #####

###### 1. OC调用 JS代码 ######

OC不会直接调用实际的js函数，而是会去调用维系的中转函数，中转函数接收到 的参数包含了 ModuleId、MethodId 和 Arguments，就可以查找自己的模块配置表，找到真正要调用的 JavaScript 函数。

###### 2. JS调用OC代码 ######

在调用 Objective-C 代码时，JavaScript 会解析出方法的 ModuleId、MethodId 和 Arguments 并放入到 MessageQueue 中，等待 Objective-C 主动拿走，或者超时后主动发送给 Objective-C。

函数内部在每一次方法调用中查找模块配置表找出要调用的方法，并通过 runtime 动态的调用。

##### 2.6 React Native 优缺点分析 #####

###### 1.优点 ######

*  复用了 React 的思想，有利于前端开发者涉足移动端。
 *  能够利用 JavaScript 动态更新的特性，快速迭代。
 *  相比于原生平台，开发速度更快，相比于 Hybrid 框架，性能更好。
 *  跨平台开发,一套代码,运行于ios和android两套平台.

###### 2.缺点 ######

做不到Write once, Run everywhere，也就是说开发者依然需要为 iOS 和 Android 平台提供两套不同的代码，比如参考官方文档可以发现不少组件和API都区分了 Android 和 iOS 版本。即使是共用组件，也会有平台独享的函数。

--------------------

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1d3UxNTA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221022/7aa38f630c744f769f9e769bc71aaa4f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1d3UxNTA_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221022/79fc549a577647efa38e5ff39be42516.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1d3UxNTA_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221022/eb7e38e76096457297edb0bdb4178be5.png
[React]: https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1d3UxNTA_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221022/d59214309d644e7fab2ab478e54ccff3.png