React Native 原理

发布时间:2019-08-05 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了React Native 原理脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

React Native简介

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

React Native 结构

clipboard.png

主要分为三个部分:

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

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

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

React Native线程模型

clipboard.png

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 原理

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

View Managers

React Native 原理

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

@H_406_59@JavaScript对象和原生代码交互

React Native 原理

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

JavaScript和本地代码间的通信

React Native 原理


其中通信的特点是:

  • 异步的

  • 序列化的

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

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

脚本宝典总结

以上是脚本宝典为你收集整理的React Native 原理全部内容,希望文章能够帮你解决React Native 原理所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。