React Native之原理浅析
原文链接
UI的描述和呈现分离开了
Javascript在react native里面非常重要
React Native它可不一样
React Native组件结构
在一定程度上，React Native和NodeJS有异曲同工之妙。它们都是通过扩展JavaScript Engine, 使它具备强大的本地资源和原生接口调用能力，然后结合JavaScript丰富的库和社区和及其稳定的跨平台能力，把javascript的魔力在浏览器之外的地方充分发挥出来
JavaScriptCore + ReactJS + Bridges 就成了React Native
RCTRootView做的事情如下
React Native的初始化分为几个步骤
这里需要提一下的是
JS Engine不直接管理UI的绘制
|
<pre style="box-sizing: border-box; overflow: auto hidden; font-family: PingFangSC-Regular, Roboto, Verdana, "Open Sans", "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans CN", "WenQuanYi Micro Hei", Arial, sans-serif; font-size: 1em; line-height: 1.5em; white-space: pre-wrap; overflow-wrap: break-word; margin: 0px; background-color: transparent;">- (NSDictionary *)constantsToExport
{
return @{ @"firstDayOfTheWeek": @"Monday" };// JS里面可以直接调用 ModuleName.firstDayOfTheWeek获取这个常量
}
</pre>
|
内部机制
JS用时序
Java层核心类及原理，如下所示
ReactContext
ReactInstanceManager
ReactRootView
CatalystInstance
JavaScriptModule
NativeModule
JavascriptModuleRegistry
NativeModuleRegistry
CoreModulePackage
Java 调用Js
Js 调用Java
