栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > JavaScript

native react 中 JavaScript 和 naitive 的通讯机制(1)

JavaScript 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

native react 中 JavaScript 和 naitive 的通讯机制(1)

bridge_future-5.jpg

作为一个 Javascript 开发人员,在开发 native react 时候我们可能没有必要关心如何写naitive 代码。但是的确有必要了解 Javascript 与native 代码是如何建立关系的。


mainImage-full-4226771.jpg

那么许多场景需要我们去接触一些 native 代码,

  • 需要整合第三方 SDK

  • 如果您应用追求高性能
    这时候需要自己写一些 native 模块来实现最求性能的目的

  • 正在构建是需要一定兼容性的应用

  • 需要调用平台的系统 API
    有时候我们不想用现有的模块来实现调用平台系统的 API 时候,也需要开发原生模块。

当然了解一些react native 内部机制无疑是有意开发 react native

下面图是 react native 线程结构图,在 native 这一侧,Main(主线程)为 UI 线程,shadow queue 这个线程负责位置的计算,更重要的是每一模块都有自己线程为 Native Modules。在 Javascript 这一侧我们有 Javascript 的线程,native 和 js 是可以进行线程通讯的。

018.JPG


这个 json 对象表示 native 的模块

{  moduleName:'ExampleModule',
  constants: {},  methods:['chainReact','bridgingIsAwesome'],  promiseMethods:[0],  syncMethods[1]}

在运行时 Javascript 是掌握所有 native 模块,这些模块会以全局变量的形式被注入到 VM 的 Javascript (context)上下文对象。现在可能你可能会感觉到一些困惑,相信随着分享进一步深入,你会了解的更多。记住上面这个 json 对象表示一个 native 的模块,


让我们深入看一下 react native 内部机制,当用户触摸屏幕进行操作,触摸事件从 native 侧发起,通过 bridge 将触摸信息从 native 传递给 Javascript ,然后 javascript 对信息进行反馈,所有信息都是经过 bridge 进行传递


019.JPG


这些信息包括创建视图,进行网络请求,重新渲染组件等等。这是为什么我们了解 bridge 的重要性。所有经过 bridge 的通讯都是异步的,所以通讯都是通过方法以及方法回调来实现的。另一个值得我们注意的所有信息需要进行序列化后才可以进行传递。而且是批量进行的这样可以提高性能。

020.JPG


其实这种通讯和客户端和服务端进行通讯很像。所有这些消息都是由消息队列来处理的。native 持有消息队列,响应于 javascript。Javascript 是影响性能的重点,当消息从消息队列来 Javascript 这一侧,我们应该确保 Javascript 不阻塞,从而不会引起消息队列的拥堵。


traffic-hotspots.jpg



作者:zidea
链接:https://www.jianshu.com/p/2315c14bf301


转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/246079.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号