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