JSI背景
由于Flutter.js的存在,和原生UI或者原生模块交互的性能问题成为了RN的弱点,为了弥补逐渐失去的地位,RN制作出了JSI来应对
JSI 是什么
在RN
中, JSI
是 JavaScript Interface
的缩写,JSI
是一个轻量级的通用的API框架,可以应用于任意的JavaScript virtual machine
,让各种平台可以方便的使用不同的JavaScript解析引擎
(JavaScript virtual machine 包含 JavaScript Engine)。
JSI
是用C++写的,用于取代原先的bridge
,提高通信效率,已在RN 的 0.58
中实现。
目前在RN中,默认使用的JavaScript virtual machine
是JavaScriptCore (JSC---WbKit中用的就是这个)
有了JSI ,我们就能轻松的直接
调用原生UI Views
或Native Modules
用Java/ObjC
实现的方法(类似RPC),而不是像原来那样用一层bridge
来排队等待原生层
返回的消息
-
Fabric
: just the UI layer re-architecture, to take full advantage of concurrent React architecture. -
TurboModules
: re-architecture of NativeModules, also using JSI. -
CodeGen
: a tool to "glue" JS and native side: it will allow for supercharge static types (TS, Flow) for compatibilty with native binaries, among other things
The JSI system can also be used to call leverage device capabilities like bluetooth or other sensors by exposing functions that JS can call. This is similar to how browsers expose functions like navigator.geolocation.getCurrentPosition that, when invoked in JavaScript, trigger the respective C++ call in the browser.
In the current system, a table with information about module names and methods is created. When JS calls a specific native module, the indices of the module and methods are passed to Java/ObjC, which then invoke the specific methods. The arguments and return values are also converted between JavaScript and JNI/ObjC objects.
[...] Now that we have a JSI object for "SampleTurboModule", can invoke methods on this JSI object from JavaScript. During the calls, we also need to convert JSI Values to JNI for argument parameters, and the reverse when sending back results.
Like in the current architecture, most types including boolean, strings, Maps, Arrays, Callbacks and Promises are supported