React Native 原理

jackzou 发布于2019-08-20 17:53 / 2504人阅读

摘要：对象和原生代码交互对象可以和原生对象之间相互调用，关系如上图。和本地代码间的通信其中通信的特点是异步的序列化的批量的，对于大批量的通信事件可以将其分成几部分，减少时间延迟参考

React Native简介

React Native是一个建立在JavaScript和React上用于构建本地应用的框架,它具有React和JavaScript相似的代码风格，编写一次可以运行在多个平台之上（>= Android 4.1 (API 16) and >= iOS 8.0），并且有着强大的社区。

React Native 结构

主要分为三个部分：

Native Code对应着原生代码，例如android的原生Java代码，ios的原生C++代码

Bridge用于将JS和原生Native Code连接起来

JS VM用于运行JS代码，React Native采用的是JavaScriptCore,在Android上，需要应用自己附带JavaScriptCore，Ios上JavaScriptCore属于系统的一部分，不需要应用附带。

React Native线程模型

React Native应用中存在三个线程队列，它们工作的流程大概如下：UI Event Queue触发事件，通过Bridge调用JS代码在JS Event Queue中运行，JS运行后将视图更新分发给Native Module Event Queue中的线程,Native Module Event Queue负责计算，然后将最后的结果交给UI Event Queue中的线程去更新。其中UI Event Queue为主线程。

Modules

React Native中有一个基本的概念就是模块，一个模块有状态和方法，我们可以通过JS调用一个Module,如上图中以Android为例，可以通过JS调用Dialog module,然后转化成原生代码对应的是Android中的DialogModule。

View Managers

React Native中的另一个概念是组件，一个组件可以通过映射关系和原生的API相对应，我们也可以自定义组件，例如上图中的和原生代码中的 new TextView(getContext())相对应。

JavaScript对象和原生代码交互

JavaScript对象可以和原生对象之间相互调用，关系如上图。

JavaScript和本地代码间的通信

其中通信的特点是：

异步的

序列化的

批量的，对于大批量的通信事件可以将其分成几部分，减少时间延迟

参考：http://www.reactnative.com/un...

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83946.html

多React Native项目时依赖管理的最佳实践

摘要：此时会把当前路径作为一个本地，在全局路径下创建一个软链接。所有依赖于全局路径下的都必须是一个版本的，并没有提供多版本号依赖的解决方法。因此，还是建议选择一个常用的版本安装在全局路径，个别需求其他版本号的的项目，使用来配置局部依赖。在实际开发过程中，经常需要同时运行和修改多个React Native工程，比如运行github上的开源项目以观察某种控件的实际效果。那么此时，各项目下的初始...

AbnerMing 2019-08-19 17:20 评论0 收藏0
跨平台技术演进

摘要：接下来，我将从原理优缺点等方面为大家分享跨平台技术演进。小程序年是微信小程序飞速发展的一年，年，各大厂商快速跟进，已经有了很大的影响力。下面，我们以微信小程序为例，分析小程序的技术架构。前言大家好，我是simbawu ，@BooheeFE Team Leader，关于这篇文章，有问题欢迎来这里讨论。随着移动互联网的普及和快速发展，手机成了互联网行业最大的流量分发入口。以及随着5G...

魏宪会 2019-08-30 15:43 评论0 收藏0