ReactNative原理与核心知识点

2023-06-21 17:58 作者:Cpp程序员 0人读过 | 我要投稿
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内部调用这个全局方法进行执行。
1
2
3
4
ctx[@"NativeMethod"] = ^(NSString *name) {
    // do something
    return someResult
}
原生调用JS
先创建一个JS上下文对象，在上下文中添加方法的全局变量。原生获取上下文的全局变量Value, 然后调用，执行这个JS方法。
1
2
3
4
5
6
7
8
9
10
11
12
// 创建一个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。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
// 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 完成方法的调用。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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 参数给这个方法完成调用。
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
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方法内会把组合标签进行拆解，最后拆解成基本的原子型标签。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
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运行环境初始化。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
- (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代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
- (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队列中自己去取任务做处理。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 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注册成根视图。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
- (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批出来结束时刷新这个队列。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
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]];
}

标签：
ReactNative原理与核心知识点

ReactNative原理与核心知识点的评论 (共条)

你可能也喜欢这些文章

最新发布的文章

ReactNative原理与核心知识点

本文作者的其他文章

ReactNative原理与核心知识点的评论 (共 条)

你可能也喜欢这些文章

最新发布的文章

ReactNative原理与核心知识点的评论 (共条)
