ReactNative原理與核心知識點

React Native特點

跨平臺

使用js寫出頁面組件代碼被React框架統一轉成Virtual DOM樹，Virtual DOM樹是UI結構的一層抽象，可以被轉換成任何支持端的UI視圖。

ReactNative框架將Virtual DOM 轉成原APP的UIView樹。

熱修復

ReactNative的產物bundle包，bundle包中包含的爲RN業務所需要的所有資源，包括代碼和資源。bundle的加載方式是APP啓動時從後臺下載，然後通過js虛擬機執行的。

所以可以將每次業務迭代修改後的代碼上傳到服務，進行用戶無感知版本更新。

注意：

bundle中的業務代碼不能修改APP現有的原生行爲，不能調用私有API，不然禁止上架。

bundle包中的js是經過babel轉義後的普通js,而非jsx語法糖。

 

JS與Native交互的基本原理

JS引擎

iOS側使用的JavaScriptCore作爲bundle產物的js執行引擎。

JS與Native交互的基本原理很簡單，就是在JS的全局上下文添加成員變量。原生調用JS是JS在JS上下文中添加方法成員變量，然後原生調用。JS調用原生是原生往JS上下文中添加方法成員變量，然後JS調用。

JS調用原生

通過將block對象賦值給js全局上下文中的全局變量，js內部調用這個全局方法進行執行。

ctx[@"NativeMethod"] = ^(NSString *name) {
    // do something
    return someResult
}

原生調用JS

先創建一個JS上下文對象，在上下文中添加方法的全局變量。原生獲取上下文的全局變量Value, 然後調用，執行這個JS方法。

// 創建一個ctx的JS上下文
JSContent *ctx = [[JSContent alloc] init];
// 創建一個變量name
[ctx evaluateScript:@"var name = 'jack'"];
// 創建一個方法
[ctx evaluateScript:@"var sayHi = function(name) { return 'hello ' + name }"];


// 通過ctx上下文對象，獲取到hello方法
JSValue *sayHiUnction = ctx[@"sayHi"];
// 運行js方法
JSValue *greetings = [sayHiUnction callWithArguments:@[@"jack"]; // hello jack

ReactNative框架中原生與JS的調用基本思路也是這種，只不過考慮到大量的Native對象註冊會污染js引擎中的上下文，增加了一層Bridge。

原生和JS之間的交互都是通過Bridge這個通道，通過裏面的幾個基礎方法進行交互。原生與JS的交互是異步的。

另外，Facebook爲了提升RN框架中JS的執行效率，專門推出了一個JS引擎 Hermes, 在關鍵指標上，相比於JSCore,V8提升了不少，比較易於RN框架集成。

 

ReactNative核心知識

RCTBridge: ReactNative中原生與JS交互的通道

RCTBridge用於給js引擎提供原生擴展接口。將原生功能如定位，3D等通過Bridge將其封裝成JS接口，然後注入到js引擎的上下文中。

RN框架啓動的簡單流程爲：首先將js代碼加載到內存，然後創建RCTBridge實例，然後創建RCTRootContentView內容展示的容器視圖，然後調用JS上下文中AppRegistry對象的runApplication方法，並將@[moduleName, appParameters]組件名，參數傳遞給JS。

// RCTRootView.m
- (void)javaScriptDidLoad:(NSNotification *)notification
{
  RCTAssertMainQueue();
  RCTBridge *bridge = notification.userInfo[@"bridge"];
  if (bridge != _contentView.bridge) {
    [self bundleFinishedLoading:bridge];
  }
}

- (void)bundleFinishedLoading:(RCTBridge *)bridge
{
  // 省略創建RCTRootContentView...

  [self runApplication:bridge];

  // 省略添加一個RCTRootContentView...
}

- (void)runApplication:(RCTBridge *)bridge
{
  NSString *moduleName = _moduleName ?: @""; // 這裏是@"NewProject"
  NSDictionary *appParameters = @{
    @"rootTag": _contentView.reactTag,
    @"initialProps": _appProperties ?: @{},
  };

  [bridge enqueueJSCall:@"AppRegistry"                 method:@"runApplication"                   args:@[moduleName, appParameters]
             completion:NULL];
}

 

原生調用JS

在JS上下文中，調用JS的方式是通過方法：global.batchedBridge.callFunctionReturnFlushedQueue

 

所以RN在原生側的的JS引擎的封裝對象中使用成員變量保存了這個JS的函數指針，原生調用JS時，通過傳遞參數 moduleid 和 methodid 完成方法的調用。

void JSIExecutor::bindBridge() {
  std::call_once(bindFlag_, [this] {
    SystraceSection s("JSIExecutor::bindBridge (once)");
    Value batchedBridgeValue =
        runtime_->global().getProperty(*runtime_, "__fbBatchedBridge");
    if (batchedBridgeValue.isUndefined() || !batchedBridgeValue.isObject()) {
      throw JSINativeException(
          "Could not get BatchedBridge, make sure your bundle is packaged correctly");
    }

    Object batchedBridge = batchedBridgeValue.asObject(*runtime_);
    callFunctionReturnFlushedQueue_ = batchedBridge.getPropertyAsFunction(
        *runtime_, "callFunctionReturnFlushedQueue");
    invokeCallbackAndReturnFlushedQueue_ = batchedBridge.getPropertyAsFunction(
        *runtime_, "invokeCallbackAndReturnFlushedQueue");
    flushedQueue_ =
        batchedBridge.getPropertyAsFunction(*runtime_, "flushedQueue");
  });
}

 

JS調用原生

JS調用原生通常是通過原生主動處理_eventQueue中的事件，特殊情況會直接調用原生註冊給JS的nativeFlushQueueImmediate方法， 並傳遞moduleName 、methodName、callback 參數給這個方法完成調用。

 

void JSIExecutor::initializeRuntime() {
  SystraceSection s("JSIExecutor::initializeRuntime");
  runtime_->global().setProperty(
      *runtime_,
      "nativeModuleProxy",
      Object::createFromHostObject(
          *runtime_, std::make_shared<NativeModuleProxy>(nativeModules_)));

  runtime_->global().setProperty(
      *runtime_,
      "nativeFlushQueueImmediate",
      Function::createFromHostFunction(
          *runtime_,
          PropNameID::forAscii(*runtime_, "nativeFlushQueueImmediate"),
          1,
          [this](
              jsi::Runtime &,
              const jsi::Value &,
              const jsi::Value *args,
              size_t count) {
            if (count != 1) {
              throw std::invalid_argument(
                  "nativeFlushQueueImmediate arg count must be 1");
            }
            callNativeModules(args[0], false);
            return Value::undefined();
          }));

  runtime_->global().setProperty(
      *runtime_,
      "nativeCallSyncHook",
      Function::createFromHostFunction(
          *runtime_,
          PropNameID::forAscii(*runtime_, "nativeCallSyncHook"),
          1,
          [this](
              jsi::Runtime &,
              const jsi::Value &,
              const jsi::Value *args,
              size_t count) { return nativeCallSyncHook(args, count); }));

  runtime_->global().setProperty(
      *runtime_,
      "globalEvalWithSourceUrl",
      Function::createFromHostFunction(
          *runtime_,
          PropNameID::forAscii(*runtime_, "globalEvalWithSourceUrl"),
          1,
          [this](
              jsi::Runtime &,
              const jsi::Value &,
              const jsi::Value *args,
              size_t count) { return globalEvalWithSourceUrl(args, count); }));

  if (runtimeInstaller_) {
    runtimeInstaller_(*runtime_);
  }
  bool hasLogger(ReactMarker::logTaggedMarker);
  if (hasLogger) {
    ReactMarker::logMarker(ReactMarker::CREATE_REACT_CONTEXT_STOP);
  }
}

Virtual DOM 虛擬DOM

 

虛擬DOM的特點

1.用於描述頁面的UI結構：在作用上虛擬DOM和普通的DOM是一樣的。

2.平臺無關性：虛擬DOM表示的UI結構是對UI的一層抽象，它是平臺無關的。具體的UI渲染是交個具體的平臺渲染引擎進行的，如iOS，安卓自身的渲染引擎。

虛擬DOM對標籤的定義

虛擬DOM把標籤分爲2類：原子型標籤，組合型標籤。

原子型標籤是平臺支持型的基礎標籤，如果RCTView, RCTText。對應瀏覽器頁面中，原子型標籤有h1,li,div等。

組合型標籤是用戶自定義的組件，它在虛擬DOM中對應的是自定義標籤構造器函數，頁面渲染時調用這個構造函數，創建一個實例，然後調用實例的render方法，組合型標籤的render方法內會把組合標籤進行拆解，最後拆解成基本的原子型標籤。

var ele = {
    ...
    type: type, // 元素的類型
    key: key, // 元素key標示
    ref: ref, // 元素的引用
    props: props, // 元素的參數，包含children
    ...
}

// example 1
<div>hello</div>
// 會被描述爲

{type: 'div',
    props: {
        children: ['hello']
    }
}

// example 2
<CustomerComponents />
// 會被描述爲
{
    type: CustomerComponents
}

 

UI渲染

RN框架與瀏覽器的對比：在瀏覽器中，JS通過調用DOM API創建UI視圖。在RN中，JS通過調用RCTUIManager來創建iOS，Android移動端的UI視圖。

RN的UI渲染是基於虛擬DOM的，通過根據不同的平臺調用不同平臺的Bridge, Brideg再調用不同平臺的的RCTUIManager進行UI的創建。

 

其他

三條線程

RN內部有三條線程在同時運行着：Shadow Thread, JS Thread, UI Thread。

JS Thread：JS線程，負責JS與原生的交互，它們的交互是異步的，每次調用都是將block放入隊列中，等js代碼執行完後，讀取事件隊列進行處理。

UI Thread：UI主線程，負責頁面的交互與渲染， 由RCTUIManager使用。

Shadow Thread: 負責將flex佈局轉成Native的佈局，由yago引擎使用。

三個隊列

RN框架內，原生與JS的交換類型分兩種：UI和事件，這2這種事件的處理都是異步的，它們都是將事件順序放置到隊列中，在合適的時機被調用。

事件的處理在RCTBridge中處理，UI的處理在RCTUIManager中處理。

JS調用原生異步事件隊列：_eventQueue隊列

原生調用JS異步事件隊列：_pendingCalls隊列

UI更新異步事件處理隊列：_pendingUIBlocks隊列

JSI

javascript interface js虛擬機通用接口層，是針對JS引擎封裝的上層API框架，使用JSI做JS引擎調用的優點：

1.底部可以任意替換JS引擎而不影響上層JS引擎的使用。如：可以任意替換JavaScript Core, V8等。

2.通過JSI，JavaScript可以持有C++宿主對象的引用，所以可以直接調用原生方法(UIView, NativeModule),它與現在統一使用Bridge這個通道和消息異步調用比起來，提高了消息發送的及時性，避免了消息隊列執行的等待。

React Native核心知識在框架中的使用

 

React Native核心功能在RN項目啓動時會進行各自的初始化，生成bundle運行上下文。在類型上可以分爲2類：

1.JS與原生的事件處理：創建RCTBridge橋接通道。

2.UI交互與更新的事件處理：創建RCTRootView容器視圖。

APP啓動，React Native運行環境初始化。

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  if (!self.bridge) {
    self.bridge = [self createBridgeWithDelegate:self launchOptions:launchOptions];
  }

  NSDictionary *initProps = [self prepareInitialProps];
  UIView *rootView = [self createRootViewWithBridge:self.bridge moduleName:self.moduleName initProps:initProps];

  if (@available(iOS 13.0, *)) {
    rootView.backgroundColor = [UIColor systemBackgroundColor];
  } else {
    rootView.backgroundColor = [UIColor whiteColor];
  }

  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
  UIViewController *rootViewController = [self createRootViewController];
  rootViewController.view = rootView;
  self.window.rootViewController = rootViewController;
  [self.window makeKeyAndVisible];
  return YES;
}

 

JS與原生的事件處理：創建RCTBridge橋接通道

RCTBridge的主要邏輯是在batchedBridge中，主要初始化流程爲：

1.初始化Native Modules

2.創建Native Modules配置表

3.準備JS引擎工廠，創建JS引擎

4.將Modules配置信息註冊到JS引擎中

5.加載boundle代碼

6.執行boundle代碼

- (void)setUp
{
  RCT_PROFILE_BEGIN_EVENT(0, @"-[RCTBridge setUp]", nil);

  //_performanceLogger日誌工具初始化

  //_bundleURL獲取

  //batchedBridge創建

  self.batchedBridge = [[bridgeClass alloc] initWithParentBridge:self];
  [self.batchedBridge start];

  RCT_PROFILE_END_EVENT(RCTProfileTagAlways, @"");
}

batchedBridge是RCTCXXBridge,它的初始化方法如下：
- (instancetype)initWithParentBridge:(RCTBridge *)bridge
{
  RCTAssertParam(bridge);

  if ((self = [super initWithDelegate:bridge.delegate
                            bundleURL:bridge.bundleURL
                       moduleProvider:bridge.moduleProvider
                        launchOptions:bridge.launchOptions])) {
    _parentBridge = bridge;
    _performanceLogger = [bridge performanceLogger];

    registerPerformanceLoggerHooks(_performanceLogger);

    /**
     * Set Initial State
     */
    _valid = YES;
    _loading = YES;
    _moduleRegistryCreated = NO;
    _pendingCalls = [NSMutableArray new];
    _displayLink = [RCTDisplayLink new];
    _moduleDataByName = [NSMutableDictionary new];
    _moduleClassesByID = [NSMutableArray new];
    _moduleDataByID = [NSMutableArray new];
    _objCModuleRegistry = [RCTModuleRegistry new];
    [_objCModuleRegistry setBridge:self];
    _bundleManager = [RCTBundleManager new];
    [_bundleManager setBridge:self];
    _viewRegistry_DEPRECATED = [RCTViewRegistry new];
    [_viewRegistry_DEPRECATED setBridge:self];
    _callableJSModules = [RCTCallableJSModules new];
    [_callableJSModules setBridge:self];

    [RCTBridge setCurrentBridge:self];

    [[NSNotificationCenter defaultCenter] addObserver:self
                                             selector:@selector(handleMemoryWarning)
                                                 name:UIApplicationDidReceiveMemoryWarningNotification
                                               object:nil];

    RCTLogSetBridgeModuleRegistry(_objCModuleRegistry);
    RCTLogSetBridgeCallableJSModules(_callableJSModules);
  }
  return self;
}


- (void)start
{
  RCT_PROFILE_BEGIN_EVENT(RCTProfileTagAlways, @"-[RCTCxxBridge start]", nil);

  [[NSNotificationCenter defaultCenter] postNotificationName:RCTJavaScriptWillStartLoadingNotification
                                                      object:_parentBridge
                                                    userInfo:@{@"bridge" : self}];

  //啓動JS線程
  _jsThread = [[NSThread alloc] initWithTarget:[self class] selector:@selector(runRunLoop) object:nil];
  _jsThread.name = RCTJSThreadName;
  _jsThread.qualityOfService = NSOperationQualityOfServiceUserInteractive;
#if RCT_DEBUG
  _jsThread.stackSize *= 2;
#endif
  [_jsThread start];

  dispatch_group_t prepareBridge = dispatch_group_create();

  [_performanceLogger markStartForTag:RCTPLNativeModuleInit];

  //1.初始化Native Modules
  [self registerExtraModules];
  //2.創建Native Modules配置表
  // Initialize all native modules that cannot be loaded lazily
  (void)[self _initializeModules:RCTGetModuleClasses() withDispatchGroup:prepareBridge lazilyDiscovered:NO];
  [self registerExtraLazyModules];

  [_performanceLogger markStopForTag:RCTPLNativeModuleInit];

  // This doesnt really do anything.  The real work happens in initializeBridge.
  _reactInstance.reset(new Instance);

  __weak RCTCxxBridge *weakSelf = self;

  // 3.準備JS引擎工廠，創建JS引擎
  std::shared_ptr<JSExecutorFactory> executorFactory;
  if (!self.executorClass) {
    if ([self.delegate conformsToProtocol:@protocol(RCTCxxBridgeDelegate)]) {
      id<RCTCxxBridgeDelegate> cxxDelegate = (id<RCTCxxBridgeDelegate>)self.delegate;
      executorFactory = [cxxDelegate jsExecutorFactoryForBridge:self];
    }
    // 4.將Modules配置信息註冊到JS引擎中
    if (!executorFactory) {
      auto installBindings = RCTJSIExecutorRuntimeInstaller(nullptr);
#if RCT_USE_HERMES
      executorFactory = std::make_shared<HermesExecutorFactory>(installBindings);
#else
      executorFactory = std::make_shared<JSCExecutorFactory>(installBindings);
#endif
    }
  } else {
    id<RCTJavaScriptExecutor> objcExecutor = [self moduleForClass:self.executorClass];
    executorFactory.reset(new RCTObjcExecutorFactory(objcExecutor, ^(NSError *error) {
      if (error) {
        [weakSelf handleError:error];
      }
    }));
  }

    //_turboModuleRegistry是一個TurboModule註冊表，TurboModule是JS在RN中的一種優化方式，將常用的JS代碼編譯成可執行代碼，提高執行速度。
  /**
   * id<RCTCxxBridgeDelegate> jsExecutorFactory may create and assign an id<RCTTurboModuleRegistry> object to
   * RCTCxxBridge If id<RCTTurboModuleRegistry> is assigned by this time, eagerly initialize all TurboModules
   */
  if (_turboModuleRegistry && RCTTurboModuleEagerInitEnabled()) {
    for (NSString *moduleName in [_turboModuleRegistry eagerInitModuleNames]) {
      [_turboModuleRegistry moduleForName:[moduleName UTF8String]];
    }

    for (NSString *moduleName in [_turboModuleRegistry eagerInitMainQueueModuleNames]) {
      if (RCTIsMainQueue()) {
        [_turboModuleRegistry moduleForName:[moduleName UTF8String]];
      } else {
        id<RCTTurboModuleRegistry> turboModuleRegistry = _turboModuleRegistry;
        dispatch_group_async(prepareBridge, dispatch_get_main_queue(), ^{
          [turboModuleRegistry moduleForName:[moduleName UTF8String]];
        });
      }
    }
  }

  // Dispatch the instance initialization as soon as the initial module metadata has
  // been collected (see initModules)
  dispatch_group_enter(prepareBridge);
  [self ensureOnJavaScriptThread:^{
    [weakSelf _initializeBridge:executorFactory];
    dispatch_group_leave(prepareBridge);
  }];

  // 5.加載boundle代碼
  // Load the source asynchronously, then store it for later execution.
  dispatch_group_enter(prepareBridge);
  __block NSData *sourceCode;
  [self
      loadSource:^(NSError *error, RCTSource *source) {
        if (error) {
          [weakSelf handleError:error];
        }

        sourceCode = source.data;
        dispatch_group_leave(prepareBridge);
      }
      onProgress:^(RCTLoadingProgress *progressData) { }];

  // 模塊和js代碼加載完成後，執行js代碼
  // Wait for both the modules and source code to have finished loading
  dispatch_group_notify(prepareBridge, dispatch_get_global_queue(QOS_CLASS_USER_INTERACTIVE, 0), ^{
    RCTCxxBridge *strongSelf = weakSelf;
    if (sourceCode && strongSelf.loading) {
      // 6.執行boundle代碼
      [strongSelf executeSourceCode:sourceCode sync:NO];
    }
  });
  RCT_PROFILE_END_EVENT(RCTProfileTagAlways, @"");
}

 

初始化Native Modules與創建Native Modules配置表

把本地的RN模塊都收集起來，包括RN框架自帶的和用戶自定義的，將模塊信息保存到Bridge的變量中，用於與JS交換。

_moduleDataByName = [NSMutableDictionary new];

_moduleClassesByID = [NSMutableArray new];

_moduleDataByID = [NSMutableArray new];

 

JS發送消息到Native時，通過- (id)moduleForName:(const char *)moduleName;查詢到模塊詳情，進行模塊調用。

_objCModuleRegistry = [RCTModuleRegistry new];

[_objCModuleRegistry setBridge:self];

準備JS引擎工廠，創建JS引擎與將Modules配置信息註冊到JS引擎中

RN將Native Modules信息收集完成後保存到成員變量中，這個成員變量是一個數組。使用moduleConfig保存模塊的模塊名，方法名。然後將這些數據注入到JS引擎中。

JS調用原生時，通過模塊名，方法名，參數調用原生方法。在原生調用JS時，會將調用放入_pendingCalls隊列中，進行異步執行。而JS調原生是將調用放入到_eventQueue隊列中，進行異步執行。

JS可以通過方法nativeFlushQueueImmediate直接調用Native，但是一般JS不會這樣做，而是等原生自己去_eventQueue隊列中自己去取任務做處理。

// js thread only (which surprisingly can be the main thread, depends on used JS executor)
- (void)flushEventsQueue
{
  [_eventQueueLock lock];
  NSDictionary *events = _events;
  _events = [NSMutableDictionary new];
  NSMutableArray *eventQueue = _eventQueue;
  _eventQueue = [NSMutableArray new];
  _eventsDispatchScheduled = NO;
  [_eventQueueLock unlock];

  for (NSNumber *eventId in eventQueue) {
    [self dispatchEvent:events[eventId]];
  }
}

 

UI交互與更新的事件處理：創建RCTRootView容器視圖

 

RCTRootView爲RN頁面的入口，在RCTRootView初始化過程中，會創建RCTRootContentView作爲內容視圖放置在RCTRootView的底部作爲根視圖。

RCTRootContentView的初始化方法中，在uiManager中將RCTRootContentView註冊成根視圖。

- (instancetype)initWithFrame:(CGRect)frame
                       bridge:(RCTBridge *)bridge
                     reactTag:(NSNumber *)reactTag
               sizeFlexiblity:(RCTRootViewSizeFlexibility)sizeFlexibility
{
  if ((self = [super initWithFrame:frame])) {
    _bridge = bridge;
    self.reactTag = reactTag;
    _sizeFlexibility = sizeFlexibility;
    _touchHandler = [[RCTTouchHandler alloc] initWithBridge:_bridge];
    [_touchHandler attachToView:self];
    [_bridge.uiManager registerRootView:self];
  }
  return self;
}

RCTUIManager是RN中UI的管理者，它負責處理所有與UI相關的事情,如：注入到JS中的創建View方法。

在createView方法中可以看到，RN對View的操作都是雙份的，分別作用在RCTShadowView和UIView上。RCTShadowView和UIView的關係類似於虛擬DOM和DOM的關係。

RCTShadowView是一個虛擬DOM樹，是一個結構體，用於描述視圖的樣式和事件，比較輕量級。

在RN中當調用setState更新組件狀態時，就會生成一個新的虛擬DOM，然後RN將新的虛擬DOM與舊的虛擬DOM進行Diff對比，生成差異對象，然後遍歷差異對象，將所有的改動更新到UI上。而更新到了Native是先更新到RCTShadowView上，等合適的時候再統一更新到UI上。

UI更新操作也是異步的，更新任務被放置在_pendingUIBlocks隊列上，在UI變化時或Bridge批出來結束時刷新這個隊列。

RCT_EXPORT_METHOD(createView
                  : (nonnull NSNumber *)reactTag viewName
                  : (NSString *)viewName rootTag
                  : (nonnull NSNumber *)rootTag props
                  : (NSDictionary *)props)
{
  RCTComponentData *componentData = _componentDataByName[viewName];
  if (componentData == nil) {
    RCTLogError(@"No component found for view with name \"%@\"", viewName);
  }

  // Register shadow view
  RCTShadowView *shadowView = [componentData createShadowViewWithTag:reactTag];
  if (shadowView) {
    [componentData setProps:props forShadowView:shadowView];
    _shadowViewRegistry[reactTag] = shadowView;
    RCTShadowView *rootView = _shadowViewRegistry[rootTag];
    RCTAssert(
        [rootView isKindOfClass:[RCTRootShadowView class]] || [rootView isKindOfClass:[RCTSurfaceRootShadowView class]],
        @"Given `rootTag` (%@) does not correspond to a valid root shadow view instance.",
        rootTag);
    shadowView.rootView = (RCTRootShadowView *)rootView;
  }

  // Dispatch view creation directly to the main thread instead of adding to
  // UIBlocks array. This way, it doesnt get deferred until after layout.
  __block UIView *preliminaryCreatedView = nil;

  void (^createViewBlock)(void) = ^{
    // Do nothing on the second run.
    if (preliminaryCreatedView) {
      return;
    }

    preliminaryCreatedView = [componentData createViewWithTag:reactTag rootTag:rootTag];

    if (preliminaryCreatedView) {
      self->_viewRegistry[reactTag] = preliminaryCreatedView;
    }
  };

  // We cannot guarantee that asynchronously scheduled block will be executed
  // *before* a block is added to the regular mounting process (simply because
  // mounting process can be managed externally while the main queue is
  // locked).
  // So, we positively dispatch it asynchronously and double check inside
  // the regular mounting block.

  RCTExecuteOnMainQueue(createViewBlock);

  [self addUIBlock:^(__unused RCTUIManager *uiManager, __unused NSDictionary<NSNumber *, UIView *> *viewRegistry) {
    createViewBlock();

    if (preliminaryCreatedView) {
      [componentData setProps:props forView:preliminaryCreatedView];
    }
  }];

  [self _shadowView:shadowView didReceiveUpdatedProps:[props allKeys]];
}

 

參考文章

https://juejin.cn/post/6916452544956858382#heading-11

https://juejin.cn/post/6844904184542822408

https://juejin.cn/post/6844904184500715527