React Native

image.png

• 1.首先写好JSX代码（React框架就是使用JSX语法）

• 2.把JSX代码解析成javaScript代码

• 3.OC读取JS文件

• 4.把javaScript代码读取出来，利用JavaScriptCore执行

• 5.javaScript代码返回一个数组，数组中会描述OC对象，OC对象的属性，OC对象所需要执行的方法，这样就能让这个对象设置属性，并且调用方法。

image.png

• 1.创建RCTRootView -> 设置窗口根控制器的View,把RN的View添加到窗口上显示。

• 2.创建RCTBridge -> 桥接对象,管理JS和OC交互，做中转左右。

• 3.创建RCTBridge -> 批量桥架对象，JS和OC交互具体实现都在这个类中。

• 4.执行[RCTBridge loadSource] -> 加载JS源码

• 5.执行[RCTBridge initModulesWithDispatchGroup] -> 创建OC模块表

• 6.执行[RCTJSCExecutor injectJSONText] -> 往JS中插入OC模块表

• 7.执行完JS代码，回调OC，调用OC中的组件

• 8.完成UI渲染

image.png

• 1.[RCTJavaScriptLoader loadBundleAtURL] -> 加载远程服务器中JS代码

• 2.attemptAsynchronousLoadOfBundleAtURL(C函数) -> 开启异步加载JS代码

• 3.[RCTBatchedBridge executeSourceCode:sourceCode] -> 让批量交接对象执行源代码

• 4. [RCTJSCExecutor executeApplicationScript] -> 交给JS执行者（RCTJSCExecutor）执行源码)
  • 真正执行JS代码的是RCTJSCExecutor对象

• 5.[postNotificationName:RCTJavaScriptDidLoadNotification] -> 发送JS代码执行完成通知

• 6.RCTRootView监听到RCTJavaScriptDidLoadNotification通知

• 7.创建RCTRootContentView

• 8.获取RCTBridge中的RCTUIManager注册RCTRootView,并且记录RCTRootView，_viewRegistry

• • RCTUIManager:管理UI组件

  • _viewRegistry：保存所有注册的View

• 9.[RCTRootView runApplication:bridge] -> 通知JS运行App

• 10.[RCTBridge enqueueJSCall:@"AppRegistry"

  method:@"runApplication"

  args:@[moduleName, appParameters]

  completion:NULL] -> 通过桥接对象让JS调用AppRegistry

• 11.[RCTBatchedBridge _actuallyInvokeAndProcessModule:module method:method arguments:args queue:RCTJSThread] -> 通过批量桥架让JS执行AppRegistry方法

• 12.[RCTJSCExecutor _executeJSCall:bridgeMethod arguments:@[module, method, args] unwrapResult:unwrapResult callback:onComplete] -> 让JS执行者调用JS代码

• 13.执行完JS代码，就能获取执行JS结果，是一个数组，OC需要做的事情都会保存到这个数组中

• 14.[RCTBatchedBridge _processResponse:json error:error] -> 处理执行完JS代码返回的结果对象

• 15.[RCTBatchedBridge handleBuffer] -> 处理JS返回的数据，JS会返回的方法调用数组：按顺序描述需要调用哪个对象的方法，一组调用包含（module，method，arguments）

• 16.[self callNativeModule:[moduleIDs[index] integerValue]

  method:[methodIDs[index] integerValue]

  params:paramsArrays[index]] -> 遍历数组，依次执行原生方法

• • 注意：当前方法，在遍历数组中的代码块中执行，不只是执行一次.
  image.png

• 1.[RCTRootView runApplication:bridge] -> 通知JS运行App

• 2.[RCTBatchedBridge _processResponse:json error:error] -> 处理执行完JS代码(runApplication)返回的相应，包含需要添加多少子控件的信息。

• 3.[RCTBatchedBridge batchDidComplete] -> 批量桥架对象调用批量处理完成方法

• 4.[RCTUIManager batchDidComplete] -> RCTUIManager调用批量处理完成的方法，就会开始去加载rootView的子控件。

• 5.[RCTUIManager createView:viewName:rootTag:props] -> 通过JS执行OC代码，让UI管理者创建子控件View

• • 通过RCT_EXPORT_METHOD宏定义createView这个方法

• RCT_EXPORT_METHOD(createView:(nonnull NSNumber *)reactTag

            viewName:(NSString *)viewName
  
            rootTag:(__unused NSNumber *)rootTag
  
            props:(NSDictionary *)props)
  

• • RCT_EXPORT_METHOD宏:会在JS中生成对应的OC方法，这样JS就能直接调用

  • 注意每创建一个UIView,就会创建一个RCTShadowView，与UIView一一对应

  • RCTShadowView:保存对应UIView的布局和子控件,管理UIView的加载

• 6.[RCTUIManager _layoutAndMount] -> 布局RCTRootView和增加子控件

• 7.[RCTUIManager setChildren:reactTags:] -> 给RCTRootView对应的RCTRootShadowView设置子控件

• • 注意：此方法也是JS调用OC方法

• 8.[RCTRootShadowView insertReactSubview:view atIndex:index++] -> 遍历子控件数组，给RCTRootShadowView插入所有子控件

• 9.[RCTShadowView processUpdatedProperties:parentProperties:] -> 处理保存在RCTShadowView中属性，就会去布局RCTShadowView对应UIView的所有子控件

• 10.[RCTView didUpdateReactSubviews] -> 给原生View添加子控件

• 11.完成UI渲染

image.png

• 1.在创建RCTRootContentView的时候，内部会创建RCTTouchHandler

• • RCTTouchHandler:继承UIGestureRecognizer，也就是它就是一个手势

  • • 并且它会作为RCTRootContentView的手势，这样点击RCTRootContentView，就会触发RCTTouchHandler

  • RCTTouchHandler:内部实现了touchBegin等触摸方法，用来处理触摸事件

• 2.在创建RCTTouchHandler的时候，内部会创建RCTEventDispatcher

• • RCTEventDispatcher:用来把事件处理传递给JS的方法处理，也就是当UI界面产生事件，就会执行JS的代码处理。

• 3.通过RCTRootContentView截获点击事件

• • 产生事件就会去触犯RCTRootContentView中的RCTTouchHandler对象。

• 4.当产生事件的时候,会执行[RCTTouchHandler touchBegin]

• 5.RCTTouchHandler的touch方法，会执行[RCTTouchHandler _updateAndDispatchTouches:eventName:]

• • 内部会创建RCTTouchEvent事件对象

• 6.[RCTEventDispatcher sendEvent:event] -> 让事件分发对象调用发送事件对象

• • 内部会把事件保存到_eventQueue（事件队列中）

• 7.[RCTEventDispatcher flushEventsQueue] -> 让事件分发对象冲刷事件队列，就是获取事件队列中所有事件执行

• 8.[RCTEventDispatcher dispatchEvent:event] -> 遍历事件队列，一个一个分发事件

• • 分发事件的本质：就是去执行JS的代码，相应事件。

• 9.[RCTBatchedBridge enqueueJSCall:[[event class] moduleDotMethod] args:[event arguments]]; -> 让桥架对象调用JS处理事件

• • 本质：就是产生事件调用JS代码

• 10.这样就能完成把UI事件交给JS代码相应