React native 源码之IOS初始化

首先，我们要知道React native是一个跨三端的技术。它使用JavaScript代码来生成原生App的应用。在这里，Javascript所起的作用，像是一位产品经理，JS的代码起到的是一个指示的作用。而Native的Java与OC，则像是一位程序员，在JS的指示下完成实际的UI生成等工作。从某个角度来说，原生相当于JS的一个解释器。


IOS通过RCTRootView初始化React native。RCTRootView暴露出来的默认初始化函数如下：

- (instancetype)initWithBundleURL:(NSURL*)bundleURL moduleName:(NSString*)moduleName initialProperties:(NSDictionary*) initialProperties launchOptions:(NSDictionary *)launchOptions

进入到该方法，我们可以看到,RN通过bundleURL与launchOptions参数初始化了一个RCTBridge *bridge变量，然后通过bridge与moduleName，initialProperties继续初始化RCTRootView。

RCTBridge与RCTBatchedBridge的初始化：

顾名思义，RCTBridge是Native与JS交互过程中Native方的桥接类。但RCTBatchedBridge是什么呢？

RCTBatchedBridge继承了RCTBridge，JS的操作，加载等工作皆在该类中进行。对RCTBridge实例，都会维护一个RCTBatchedBridge实例，已完成面向JS端的操作。一般而言，一个RN应用只需要一个RCTBridge实例，该实例维护的RCTBatchedBridge实例，会保存为RCTBridge类中的static变量。

在一般情况下，RCTBridge的初始化只需要bundleURL参数：

- (instancetype)initWithDelegate:nil bundleURL:bundleURL moduleProvider:nil launchOptions:nil

该方法实际上是setUP函数的包装，其主要功能就是创建并启动本类的RCTBatchedBridge实例。

RCTBatchedBridge不会在RCTBridge实例之外初始化，其init函数依赖于包含它的RCTBridge实例（ParentBridge）：

- (instancetype)initWithParentBridge:(RCTBridge *)bridge

RCTBatchedBridge中发生的事情

RCTBatchedBridge完成初始化后，ParentBridge会调用RCTBatchedBridge实例的start方法，Start 方法中主要的工作如下：

在start函数中，首先同时进行JSbundle代码的加载与NativeModule的初始化（通过dispatch_group_tinitModulesAndLoadSource）

1、JSbundle代码的加载：

JS Bundle加载后存储在NSData型数据中：

[self loadSource:^(NSData *source){

sourceCode = source;

} onProgress:nil]

=》

[RCTJavaScriptLoader loadBundleAtURL:self.bundleURL onProgress:onProgress onComplete:^(NSError *error, NSData *source, int64_t sourceLength) {onSourceLoad(error, source, sourceLength);}];

=》

NSData *source = [NSData dataWithContentsOfFile:scriptURL.path options:NSDataReadingMappedIfSafe error:&error];

可以看到，JSBundle最终转化成为NSData数据。

2、初始化Native module

Native module，指的是在RN运行中使用的Native类。举例来说，ReactNative的JS执行器RCTJSCExecutor，就是一个NativeModule。此外，用户为RN提供原生函数的类，如CodePush等，也是Native module。

1）静态阶段

Native module都存储在staticNSMutableArray *RCTModuleClasses;继承了协议并在类中使用了协议提供的宏RCT_EXPORT_MODULE。

RCTBridgeModule内部如下所示：

{

+ (NSString *)moduleName;

@property (nonatomic, weak, readonly) RCTBridge *bridge;

…...

}

宏RCT_EXPORT_MODULE的展开如下：

（ RCT_EXPORT_MODULE（jsName））

=>

{

extern __attribute__((visibility("default")))void RCTRegisterModule(Class);

+ (NSString *) moduleName {

return @“jsName";

}

+ (void)load {

RCTRegisterModule(self);

}

}

可以看到，对一个Native module，moduleName会被RCT_EXPORT_MODULE覆盖。

而void RCTRegisterModule(Class)关联到了RCTBridge类中的同名函数。（不太理解，应该是通过extern __attribute__((visibility("default")))声明关联过去的。

RCTBridge中的RCTRegisterModule的实现如下：

void RCTRegisterModule(Class moduleClass)

{

static dispatch_once_t onceToken;

dispatch_once(&onceToken, ^{

RCTModuleClasses = [NSMutableArray new];

});

[RCTModuleClasses addObject:moduleClass];

}

也就是说，在编译阶段，*RCTModuleClasses中就存储了各个Native module的Class （OC中类函数的self是class变量）。

2）实例化module并存储

start方法中调用initModulesWithDispatchGroup方法用来初始化native module，而这些native module会转换成为RCTModuleData提供给JS端使用。

在默认流程中，首先初始化的是Javascript执行器_javaScriptExecutor，如没有自定义，则使用RCTJSCExecutor执行结果。

然后，RN遍历RCTGetModuleClasses，将RCTGetModuleClasses中的各个Class提取出来，并存储类名。对每个moduleClass，通过moduleClass生成需要的RCTModuleData *moduleData，生成的moduleData就是JS可以使用的module。这些moduleData的存储是通过以下几个数据结构实现的：

NSDictionary *_moduleDataByName;

NSArray *_moduleDataByID;

NSArray *_moduleClassesByID;

2.1）RCTModuleData 初始化

RCTModuleData是Native module的包装类，Native module就是通过该类的实例暴露给JS端的。RCTModuleData实例变量中的_moduleClass与_instance分别存储Native module 的类变量与实例变量。_bridge则是当前的RCTBatchedBridge

initWithModuleClass:(Class)moduleClass

initWithModuleInstance:(id)instance

在RCTModuleData初始化时，会根据类中是否含有函数来设定变量，决定如何加载Native module。

_implementsBatchDidComplete = [_moduleClass instancesRespondToSelector:@selector

(batchDidComplete)];

_implementsPartialBatchDidFlush = [_moduleClass instancesRespondToSelector:@selector

(partialBatchDidFlush)];

_requiresMainQueueSetup = !_instance && [_moduleClass instanceMethodForSelector:@selector(init)] != objectInitMethod;

_hasConstantsToExport = [_moduleClass instancesRespondToSelector:@selector(constantsToExport)];

_requiresMainQueueSetup表示有Native module有自定义的初始化方法，_hasConstantsToExport表示Native module有输出的常量（通过constantsToExport）。这两者为真时，Native module不会使用懒加载机制，而是生成ModuleData后立即初始化_instance。

一般而言，通过moduleClass初始化的RCTModuleData实例变量有lazyInit机制 。_instance的实例化在调用[moduleDatainstance]的时刻进行的。

[moduleDatainstance]主要是对[moduleDatasetUpInstanceAndBridge]的封装。[moduleDatasetUpInstanceAndBridge]可分为4个主要步骤：

实例化：_instance= [_moduleClassnew];

将_bridge关联到实例上：[(id)_instancesetValue:_bridgeforKey:@"bridge"];

为实例建立方法执行队列：

_queueName= [NSStringstringWithFormat:@"com.facebook.react.%@Queue",self.name];

_methodQueue=dispatch_queue_create(_queueName.UTF8String,DISPATCH_QUEUE_SERIAL);

[(id)_instancesetValue:_methodQueueforKey:@"methodQueue"];

4.初始化结束后通知_bridge

4.1 将Module注册为观察者：[_bridgeregisterModuleForFrameUpdates:_instancewithModuleData:self];（在RCTDispalyLink上细说）

RCTDisplayLink是一个CADisplayLink的包装。其主要数据结构如下：

{

CADisplayLink*_jsDisplayLink;

NSMutableSet *_frameUpdateObservers;

NSRunLoop*_runLoop;

}

CADisplayLink

CADisplayLink是一个能让我们以和屏幕刷新率相同的频率将内容画到屏幕上的定时器。我们在应用中创建一个新的 CADisplayLink 对象，把它添加到一个runloop中，并给它提供一个 target 和selector 在屏幕刷新的时候调用。

一但CADisplayLink以特定的模式注册到runloop之后，每当屏幕需要刷新的时候，runloop就会调用CADisplayLink绑定的target上的selector，这时target可以读到 CADisplayLink 的每次调用的时间戳，用来准备下一帧显示需要的数据。例如一个视频应用使用时间戳来计算下一帧要显示的视频数据。在UI做动画的过程中，需要通过时间戳来计算UI对象在动画的下一帧要更新的大小等等。

RCTDisplayLink通过如下方法初始化CADisplayLink：

_jsDisplayLink = [CADisplayLink displayLinkWithTarget:self selector:@selector(_jsThreadUpdate:)];

这样系统在每次屏幕刷新时会调用_jsThreadUpdate。

对所有的RCTModuleData的实例，只有实现了协议RCTFrameUpdateObserver的module，才会被注册到RCTDisplayLink的_frameUpdateObservers中。而RCTFrameUpdateObserver协议如下：

/**

* Method called on every screen refresh (if paused != YES)

*/

- (void)didUpdateFrame:(RCTFrameUpdate*)update;

/**

* Synthesize and set to true to pause the calls to -[didUpdateFrame:]

*/

@property (nonatomic, readonly, getter=isPaused) BOOL paused;

/**

* Callback for pause/resume observer.

* Observer should call it when paused property is changed.

*/

@property (nonatomic, copy) dispatch_block_t pauseCallback;

而_jsThreadUpdate最主要的功能就是调用_frameUpdateObservers中每一个module的- (void)didUpdateFrame:(RCTFrameUpdate*)update;

这样

4.2 向_bridge发送完成通知

2.2）RCTModuleData config：

RCTModuleData的config变量是一个Array，里面存放了对应的Native module需要暴露给JS端的数据。其生成过程如下：

2.2.1）gatherConstants

Native module通过实现constantsToExport函数来输出常量

2.2.2）gatherMethods

Methods指的是Native module中暴露给JS的方法。这些方法在Native module类中通过宏RCT_EXPORT_METHOD来包装，在RCTModuleData中则储存为RCTModuleMethod型变量。

宏RCT_EXPORT_METHOD

RCT_EXPORT_METHOD（method）=> RCT_REMAP_METHOD(, method)

RCT_REMAP_METHOD(js_name, method) => RCT_EXTERN_REMAP_METHOD(js_name, method)\- (void)method

RCT_EXTERN_REMAP_METHOD(js_name, method)  =>

+ (NSArray *)RCT_CONCAT(__rct_export__, RCT_CONCAT(js_name, RCT_CONCAT(__LINE__, __COUNTER__))) {

return @[@#js_name, @#method];

}

__COUNTER__宏，这个宏展开为一个整数，初始化为0，每使用一次就+1

这样

RCT_EXPORT_METHOD(jumpWeb:(NSString *)url resolver:(RCTPromiseResolveBlock)resolve rejecter (RCTPromiseRejectBlock)reject) {

[[NSNotificationCenter defaultCenter] postNotificationName:@"openWebView" object:nil userInfo:@{@"url":url}];

}

=>

+ (NSArray *)__rct_export__(lineNum)(randomNumber) {

return @[@"", @"jumpWeb:(NSString *)url resolver:(RCTPromiseResolveBlock)resolve rejecter (RCTPromiseRejectBlock)reject"]

}

-(void)jumpWeb:(NSString *)url resolver:(RCTPromiseResolveBlock)resolve rejecter (RCTPromiseRejectBlock)reject {

[[NSNotificationCenter defaultCenter] postNotificationName:@"openWebView" object:nil userInfo:@{@"url":url}];

}

RCT_REMAP_METHOD(getVersion,getUserLoginResolver:(RCTPromiseResolveBlock)resolve rejecter:(RCTPromiseRejectBlock)reject){

resolve(appVersion);

}

=>

+ (NSArray *)__rct_export__(lineNum)(randomNumber) {

return @[@"getVersion", @"getUserLoginResolver:(RCTPromiseResolveBlock)resolve rejecter:(RCTPromiseRejectBlock)reject"]

}

-(void)getUserLoginResolver:(RCTPromiseResolveBlock)resolve rejecter:(RCTPromiseRejectBlock)reject {

resolve(appVersion);

}

也就说， RCT_EXPORT_METHOD 宏，会在实例方法前生成一个类方法。

RCTModuleData中，读取_moduleClass的methodsList：

Method *methods = class_copyMethodList(object_getClass(cls), &methodCount);

如果methods中的元素有前缀__rct_export__，就会执行该函数，将结果保存为entries：

IMP imp = method_getImplementation(method);

NSArray *entries =((NSArray *(*)(id, SEL))imp)(_moduleClass, selector);

然后初始化RCTModuleMethod

id moduleMethod =[[RCTModuleMethod alloc] initWithMethodSignature:entries[1] JSMethodName:entries[0] moduleClass:_moduleClass];

然后将这些Methods存储到_methods中。

2.2.3）classifyMethods

对方法数组进行分类，如果函数使用了 “RCTPromise”,promiseMethods中会存放该函数在_methods中的位置。

还有一个syncMethods，这个一直为空，没找到调用。

最后，生成的config如下：

NSArray *config = @[self.name，constants，methods，promiseMethods，syncMethods)

RCT_EXPORT_MODULE(ToolModule)

RCT_EXPORT_METHOD(call:(NSString*)phone resolver:(RCTPromiseResolveBlock)resolve rejecter:(RCTPromiseRejectBlock)reject);

RCT_REMAP_METHOD(getVersion,getUserLoginResolver:(RCTPromiseResolveBlock)resolve rejecter:(RCTPromiseRejectBlock)reject);

RCT_REMAP_METHOD(cleanWebViewCache,cleanWebViewCacheResolver:(RCTPromiseResolveBlock)resolve

rejecter:(RCTPromiseRejectBlock)reject);

=>

[ ToolModule，，[call,getVersion,cleanWebViewCache]，[0,1,2]，]

3）启动JSExecutor并将ModuleConfig写入到JScontext

3.1JSExecutor与初始化

RCTBatchedBridge保持一个idjavaScriptExecutor。这是JAVASCRIPT的执行器。这一步就是RCTBatchedBridge的初始化。

JSExecutor是native端的JS代码解释器。RN默认使用RCTJSCExecutor，而而该类主要是对JavaScriptCore进行包装。

RCTJSCExecutor有以下几个关键数据：

NSThread_javaScriptThread ：在init时创建并开启，JSCore的执行都在该线程上。

RCTJavaScriptContext*_context; ： 就是JSContext，主要是关联_javaScriptThread与JScontext

JSValueRef_batchedBridgeRef; ： JS端bridge的JSValue

JSExecutor初始化的主要工作是配置JS的执行环境,其简写代码如下：

//初始化JSContext

JSGlobalContextRefcontextRef =JSGlobalContextCreateInGroup();

self.context =[JSContext(contextRef)contextWithJSGlobalContextRef:contextRef]

//关联JSContext与_javaScriptThread

NSMutableDictionary*threadDictionary = [[NSThreadcurrentThread]threadDictionary];

threadDictionary[RCTFBJSContextClassKey] =JSC_JSContext(contextRef);

threadDictionary[RCTFBJSValueClassKey] =JSC_JSValue(contextRef);

//threadDictionary：每个线程都维护了一个键-值的字典,它可以在线程里面的任何地方被访问。你可以使用该字典来保存一些信息,这些信息在整个线程的执行过程中都保持不变。

//配置Context，JS端可以通过Global访问OC的代码

context[@"nativeRequireModuleConfig”] =>^NSArray*(NSString*moduleName) {[strongSelf->_bridgeconfigForModuleName:moduleName];}

context[@"nativeFlushQueueImmediate"] = ^(NSArray *calls){[strongSelf->_bridgehandleBuffer:callsbatchEnded:NO];}

context[@"nativeCallSyncHook"]= ^(NSArray *calls){idresult = [strongSelf->_bridgecallNativeModule:modulemethod:methodparams:args];

}

//也就是说，在JS代码中，global.nativeRequireModuleConfig,global.nativeFlushQueueImmediate,global.nativeCallSyncHook分别对应上了原生的代码

3.2 moduleConfig

将各个RCTModuleData中的config数据保存为一个JSON字符串 ：

{@"remoteModuleConfig": config}（这个config是个数组）

3.3 JSON数据注入

在以上两个步骤完成后，调用javaScriptExecutor的函数，将moduleconfig生成的JSON字符串注入到JSContext中：

[_javaScriptExecutor injectJSONText:configJSON asGlobalObjectNamed:@"__fbBatchedBridgeConfig" callback:onComplete];

这样，在JS环境中，就可以直接通过global.__fbBatchedBridgeConfig访问到config。具体过程点这里

4）执行加载成功的JSBundle

JSBundle被读入后，变成了NSData *sourceCode。然后，调用javaScriptExecutor的executeApplicationScript:sourceURL:onComplete.

该函数的实际过程是：

JSStringRef execJSString = JSStringCreateWithUTF8CString(ctx, (const char *)taggedScript.script.bytes);

JSEvaluateScript(ctx, execJSString, NULL, bundleURL, 0, &jsError);

JSStringRelease(ctx, execJSString);

在完成加载之后，RCTBatchedBridag会发送RCTJavaScriptDidLoadNotification 通知，

RCTRootView则会接受该通知,调用[selfrunApplication:bridge]; 该函数调用

[bridgeenqueueJSCall:@“AppRegistry"method:@“runApplication"args:@[moduleName, appParameters]completion:NULL];

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 215,634评论 6赞 497
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 91,951评论 3赞 391
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 161,427评论 0赞 351
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 57,770评论 1赞 290
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 66,835评论 6赞 388
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,799评论 1赞 294
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,768评论 3赞 416
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,544评论 0赞 271
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,979评论 1赞 308
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,271评论 2赞 331
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,427评论 1赞 345
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,121评论 5赞 340
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,756评论 3赞 324
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,375评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,579评论 1赞 268
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,410评论 2赞 368
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,315评论 2赞 352