React Native 从入门到源码

MilMacomber 3年前
   <p>React Native 是最近非常火的一个话题,介绍如何利用 React Native 进行开发的文章和书籍多如牛毛,但面向入门水平并介绍它工作原理的文章却寥寥无几。</p>    <p>本文分为两个部分:上半部分用通俗的语言解释了相关的名词,重点介绍 React Native 出现的背景和试图解决的问题。适合新手对 React Native 形成初步了解。(事实证明,女票能看懂这段)</p>    <p>下半部分则通过源码(0.27 版本)分析 React Native 的工作原理,适合深入学习理解 React Native 的运行机制。最后则是我个人对 React Native 的分析与前景判断。</p>    <h2>动态配置</h2>    <p>由于 AppStore 审核周期的限制,如何动态的更改 app 成为了永恒的话题。无论采用何种方式,我们的流程总是可以归结为以下三部曲:“从 Server 获取配置 --> 解析 --> 执行native代码”。</p>    <p>很多时候,我们自觉或者不自觉的利用 JSON 文件实现动态配置的效果,它的核心流程是:</p>    <ol>     <li>通过 HTTP 请求获取 JSON 格式的配置文件。</li>     <li>配置文件中标记了每一个元素的属性,比如位置,颜色,图片 URL 等。</li>     <li>解析完 JSON 后,我们调用 Objective-C 的代码,完成 UI 控件的渲染。</li>    </ol>    <p>通过这种方法,我们实现了在后台配置 app 的展示样式。从本质上来说,移动端和服务端约定了一套协议,但是协议内容严重依赖于应用内要展示的内容,不利于拓展。也就是说,如果业务要求频繁的增加或修改页面,这套协议很难应付。</p>    <p>最重要的是,JSON 只是一种数据交换的格式,说白了,我们就是在解析文本数据。这就意味着它只适合提供一些配置信息,而不方便提供逻辑信息。举个例子,我们从后台可以配置颜色,位置等信息,但如果想要控制 app 内的业务逻辑,就非常复杂了。</p>    <p>记住,我们只是在解析字符串,它完全不具备运行和调试的能力。</p>    <h2>React</h2>    <p>不妨暂时抛弃移动端的烦恼,来看看前端的“新玩意”。</p>    <h3>背景</h3>    <p>作为前端小白,我以前对前端的理解是这样的:</p>    <ul>     <li>用 HTML 创建 DOM,构建整个网页的布局、结构</li>     <li>用 CSS 控制 DOM 的样式,比如字体、字号、颜色、居中等</li>     <li>用 JavaScript 接受用户事件,动态的操控 DOM</li>    </ul>    <p>在这三者的配合下,几乎所有页面上的功能都能实现。但也有比较不爽地方,比如我想动态修改一个按钮的文字,我需要这样写:</p>    <pre>  <code class="language-javascript"><button type="button" id="button" onclick="onClick()">old button</button>    </code></pre>    <p>然后在 JavaScript 中操作 DOM:</p>    <pre>  <code class="language-javascript"><script>    function onClick() {      document.getElementById('button').innerHTML='new button';  }  </script>    </code></pre>    <p>可以看到,在 HTML 和 JavaScript 代码中, id 和 onclick 事件触发的函数必须完全对应,否则就无法正确的响应事件。如果想知道一个 HTML 标签会如何被响应,我们还得跑去 JavaScript 代码中查找,这种原始的配置方式让我觉得非常不爽。</p>    <h3>初识 React</h3>    <p>随着 非死book 推出了 React 框架,这个问题得到了大幅度改善。我们可以把一组相关的 HTML 标签,也就是 app 内的 UI 控件,封装进一个组件(Component)中,我从 <a href="http://www.open-open.com/lib/view/open1427790719850.html">阮一峰的 React 教程</a> 中摘录了一段代码:</p>    <pre>  <code class="language-javascript">var MyComponent = React.createClass({      handleClick: function() {      this.refs.myTextInput.focus();    },    render: function() {      return (        <div>          <input type="text" ref="myTextInput" />          <input type="button" value="Focus the text input" onClick={this.handleClick} />        </div>      );    }  });  </code></pre>    <p>如果你想问:“为什么 JavaScript 代码里面出现了 HTML 的语法”,那么恭喜你已经初步体会到 React 的奥妙了。这种语法被称为 JSX,它是一种 JavaScript 语法拓展。JSX 允许我们写 HTML 标签或 React 标签,它们终将被转换成原生的 JavaScript 并创建 DOM。</p>    <p>在 React 框架中,除了可以用 JavaScript 写 HTML 以外,我们甚至可以写 CSS,这在后面的例子中可以看到。</p>    <h3>理解 React</h3>    <p>前端界总是喜欢创造新的概念,仿佛谁说的名词更晦涩,谁的水平就越高。如果你和当时的我一样,听到 React 这个概念一脸懵逼的话,只要记住以下定义即可:</p>    <p>React 是一套可以用简洁的语法高效绘制 DOM 的框架</p>    <p>上文已经解释过了何谓“简洁的语法”,因为我们可以暂时放下 HTML 和 CSS,只关心如何用 JavaScript 构造页面。</p>    <p>所谓的“高效”,是因为 React 独创了 Virtual DOM 机制。Virtual DOM 是一个存在于内存中的 JavaScript 对象,它与 DOM 是一一对应的关系,也就是说只要有 Virtual DOM,我们就能渲染出 DOM。</p>    <p>当界面发生变化时,得益于高效的 DOM Diff 算法,我们能够知道 Virtual DOM 的变化,从而高效的改动 DOM,避免了重新绘制 DOM。</p>    <p>当然,React <strong>并不是前端开发的全部</strong> 。从之前的描述也能看出,它专注于 UI 部分,对应到 MVC 结构中就是 View 层。要想实现完整的 MVC 架构,还需要 Model 和 Controller 的结构。在前端开发时,我们可以采用 Flux 和 Redux 架构,它们并非框架(Library),而是和 MVC 一样都是一种架构设计(Architecture)。</p>    <p>如果不从事前端开发,就不用深入的掌握 Flux 和 Redux 架构,但理解这一套体系结构对于后面理解 React Native <strong>非常重要</strong> 。</p>    <h2>React Native</h2>    <p>分别介绍完了移动端和前端的背景知识后,本文的主角——React Native 终于要登场了。</p>    <h3>融合</h3>    <p>前面我们介绍了移动端通过 JSON 文件传递信息的不足之处:只能传递配置信息,无法表达逻辑。从本质上讲,这是因为 JSON 毕竟只是纯文本,它缺乏像编程语言那样的运行能力。</p>    <p>而 React 在前端取得突破性成功以后,JavaScript 布道者们开始试图一统三端。他们利用了移动平台能够运行 JavaScript 代码的能力,并且发挥了 JavaScript 不仅仅可以传递配置信息,还可以表达逻辑信息的优点。</p>    <p>当痛点遇上特点,两者一拍即合,于是乎:</p>    <p>一个基于 JavaScript,具备动态配置能力,面向前端开发者的移动端开发框架,React Native,诞生了!</p>    <p>看到了么,这是一个面向前端开发者的框架。它的宗旨是让前端开发者像用 React 写网页那样,用 React Native 写移动端应用。这就是为什么 React Native 自称:</p>    <p>Learn once,Write anywhere!</p>    <p>而非很多跨平台语言,项目所说的:</p>    <p>Write once, Run anywhere!</p>    <p>React Native 希望前端开发者学习完 React 后,能够用同样的语法、工具等,分别开发安卓和 iOS 平台的应用并且不用一行原生代码。</p>    <p>如果用一个词概括 React Native,那就是: <strong>Native 版本的 React</strong> 。</p>    <h3>原理概述</h3>    <p>React Native 不是黑科技,我们写的代码总是以一种非常合理,可以解释的方式的运行着,只是绝大多数人没有理解而已。接下来我以 iOS 平台为例,简单的解释一下 React Native 的原理。</p>    <p>首先要明白的一点是,即使使用了 React Native,我们依然需要 UIKit 等框架,调用的是 Objective-C 代码。总之,JavaScript 只是辅助,它只是提供了配置信息和逻辑的处理结果。React Native 与 Hybrid <strong>完全没有关系</strong> ,它只不过是以 JavaScript 的形式告诉 Objective-C 该执行什么代码。</p>    <p>其次,React Native 能够运行起来,全靠 Objective-C 和 JavaScript 的交互。对于没有接触过 JavaScript 的人来说,非常有必要理解 JavaScript 代码如何被执行。</p>    <p>我们知道 C 系列的语言,经过编译,链接等操作后,会得到一个二进制格式的可执行文,所谓的运行程序,其实是运行这个二进制程序。</p>    <p>而 JavaScript 是一种脚本语言,它不会经过编译、链接等操作,而是在运行时才动态的进行词法、语法分析,生成抽象语法树(AST)和字节码,然后由解释器负责执行或者使用 JIT 将字节码转化为机器码再执行。整个流程由 JavaScript 引擎负责完成。</p>    <p>苹果提供了一个叫做 JavaScript Core 的框架,这是一个 JavaScript 引擎。通过下面这段代码可以简单的感受一下 Objective-C 如何调用 JavaScript 代码:</p>    <pre>  <code class="language-javascript">JSContext *context = [[JSContext alloc] init];    JSValue *jsVal = [context evaluateScript:@"21+7"];    int iVal = [jsVal toInt32];    </code></pre>    <p>这里的 JSContext 指的是 JavaScript 代码的运行环境,通过 evaluateScript 即可执行 JavaScript 代码并获取返回结果。</p>    <p>JavaScript 是一种单线程的语言,它不具备自运行的能力,因此总是被动调用。很多介绍 React Native 的文章都会提到 “JavaScript 线程” 的概念,实际上,它表示的是 Objective-C 创建了一个单独的线程,这个线程只用于执行 JavaScript 代码,而且 JavaScript 代码只会在这个线程中执行。</p>    <h2>Objective-C 与 JavaScript 交互</h2>    <p>提到 Objective-C 与 JavaScript 的交互,不得不推荐 bang神的这篇文章: <a href="/misc/goto?guid=4958870578373948259" rel="nofollow,noindex">React Native通信机制详解</a> 。虽然其中不少细节都已经过时,但是整体的思路值得学习。</p>    <p>本节主要分析 Objective-C 与 JavaScript 交互时的整理逻辑与流程,下一节将通过源码来分析具体原理。</p>    <h3>JavaScript 调用 Objective-C</h3>    <p>由于 JavaScript Core 是一个面向 Objective-C 的框架,在 Objective-C 这一端,我们对 JavaScript 上下文知根知底,可以很容易的获取到对象,方法等各种信息,当然也包括调用 JavaScript 函数。</p>    <p>真正复杂的问题在于,JavaScript 不知道 Objective-C 有哪些方法可以调用。</p>    <p>React Native 解决这个问题的方案是在 Objective-C 和 JavaScript 两端都保存了一份配置表,里面标记了所有 Objective-C 暴露给 JavaScript 的模块和方法。这样,无论是哪一方调用另一方的方法,实际上传递的数据只有 ModuleId 、 MethodId 和 Arguments 这三个元素,它们分别表示类、方法和方法参数,当 Objective-C 接收到这三个值后,就可以通过 runtime 唯一确定要调用的是哪个函数,然后调用这个函数。</p>    <p>再次重申,上述解决方案只是一个抽象概念,可能与实际的解决方案有微小差异,比如实际上 Objective-C 这一端,并没有直接保存这个模块配置表。具体实现将在下一节中随着源码一起分析。</p>    <h3>闭包与回调</h3>    <p>既然说到函数互调,那么就不得不提到回调了。对于 Objective-C 来说,执行完 JavaScript 代码再执行 Objective-C 回调毫无难度,难点依然在于 JavaScript 代码调用 Objective-C 之后,如何在 Objective-C 的代码中,回调执行 JavaScript 代码。</p>    <p>目前 React Native 的做法是:在 JavaScript 调用 Objective-C 代码时,注册要回调的 Block,并且把 BlockId 作为参数发送给 Objective-C,Objective-C 收到参数时会创建 Block,调用完 Objective-C 函数后就会执行这个刚刚创建的 Block。</p>    <p>Objective-C 会向 Block 中传入参数和 BlockId ,然后在 Block 内部调用 JavaScript 的方法,随后 JavaScript 查找到当时注册的 Block 并执行。</p>    <h3>图解</h3>    <p>好吧,如果你是新手,并且坚持读到了这里,估计已经懵逼了。不要担心,与 JavaScript 的交互确实不是一下子能够完全理清楚的,你可以先参考这个示意图:</p>    <p><img src="https://simg.open-open.com/show/2f888a0f66d2ec5267620f7d218b24b2.png"></p>    <p>注:</p>    <ol>     <li>本图由 bang 的文章中的图片修改而来</li>     <li>本图只是一个简单的示意图,不建议当做时序图使用,请参考下一节源码分析。</li>     <li>Objective-C 和 JavaScript 的交互总是由前者发起,本图为了简化,省略了这一步骤。</li>    </ol>    <h2>React Native 源码分析</h2>    <p>要想深入理解 React Native 的工作原理,有两个部分有必要阅读一下,分别是初始化阶段和方法调用阶段。</p>    <p>为了提炼出代码的核心含义,我会在不改变代码意图的基础上对它做一些删改,以便阅读。</p>    <p>写这篇文章是,React Native 还处于 0.27 版本,由于在 1.0 之前的变动幅度相对较大,因此下面的源码分析很可能随着 React Native 的演变而过时。但不管何时,把下面的源码读一遍都有助于你加深对 React Native 原理的理解。</p>    <h2>初始化 React Native</h2>    <p>每个项目都有一个入口,然后进行初始化操作,React Native 也不例外。一个不含 Objective-C 代码的项目留给我们的唯一线索就是位于 AppDelegate 文件中的代码:</p>    <pre>  <code class="language-javascript">RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation                                                        moduleName:@"PropertyFinder"                                               initialProperties:nil                                                   launchOptions:launchOptions];  </code></pre>    <p>用户能看到的一切内容都来源于这个 RootView ,所有的初始化工作也都在这个方法内完成。</p>    <p>在这个方法内部,在创建 RootView 之前,React Native 实际上先创建了一个 Bridge 对象。它是 Objective-C 与 JavaScript 交互的桥梁,后续的方法交互完全依赖于它,而整个初始化过程的最终目的其实也就是创建这个桥梁对象。</p>    <p>初始化方法的核心是 setUp 方法,而 setUp 方法的主要任务则是创建 BatchedBridge 。</p>    <p>BatchedBridge 的作用是批量读取 JavaScript 对 Objective-C 的方法调用,同时它内部持有一个 JavaScriptExecutor ,顾名思义,这个对象用来执行 JavaScript 代码。</p>    <p>创建 BatchedBridge 的关键是 start 方法,它可以分为五个步骤:</p>    <ol>     <li>读取 JavaScript 源码</li>     <li>初始化模块信息</li>     <li>初始化 JavaScript 代码的执行器,即 RCTJSCExecutor 对象</li>     <li>生成模块列表并写入 JavaScript 端</li>     <li>执行 JavaScript 源码</li>    </ol>    <p>我们逐个分析每一步完成的操作:</p>    <h3>读取 JavaScript 源码</h3>    <p>这一部分的具体代码实现没有太大的讨论意义。我们只要明白,JavaScript 的代码是在 Objective-C 提供的环境下运行的,所以第一步就是把 JavaScript 加载进内存中,对于一个空的项目来说,所有的 JavaScript 代码大约占用 1.5 Mb 的内存空间。</p>    <p>需要说明的是,在这一步中,JSX 代码已经被转化成原生的 JavaScript 代码。</p>    <h3>初始化模块信息</h3>    <p>这一步在方法 initModulesWithDispatchGroup: 中实现,主要任务是找到所有需要暴露给 JavaScript 的类。每一个需要暴露给 JavaScript 的类(也成为 Module,以下不作区分)都会标记一个宏: RCT_EXPORT_MODULE ,这个宏的具体实现并不复杂:</p>    <pre>  <code class="language-javascript">#define RCT_EXPORT_MODULE(js_name) \  RCT_EXTERN void RCTRegisterModule(Class); \    + (NSString *)moduleName { return @#js_name; } \  + (void)load { RCTRegisterModule(self); }  </code></pre>    <p>这样,这个类在 load 方法中就会调用 RCTRegisterModule 方法注册自己:</p>    <pre>  <code class="language-javascript">void RCTRegisterModule(Class moduleClass)    {    static dispatch_once_t onceToken;    dispatch_once(&onceToken, ^{      RCTModuleClasses = [NSMutableArray new];    });      [RCTModuleClasses addObject:moduleClass];  }  </code></pre>    <p>因此,React Native 可以通过 RCTModuleClasses 拿到所有暴露给 JavaScript 的类。下一步操作是遍历这个数组,然后生成 RCTModuleData 对象:</p>    <pre>  <code class="language-javascript">for (Class moduleClass in RCTGetModuleClasses()) {        RCTModuleData *moduleData = [[RCTModuleData alloc]initWithModuleClass:moduleClass                                                                      bridge:self];      [moduleClassesByID addObject:moduleClass];      [moduleDataByID addObject:moduleData];  }  </code></pre>    <p>可以想见, RCTModuleData 对象是模块配置表的主要组成部分。如果把模块配置表想象成一个数组,那么每一个元素就是一个 RCTModuleData 对象。</p>    <p>这个对象保存了 Module 的名字,常量等基本信息,最重要的属性是一个数组,保存了所有需要暴露给 JavaScript 的方法。</p>    <p>暴露给 JavaScript 的方法需要用 RCT_EXPORT_METHOD 这个宏来标记,它的实现原理比较复杂,有兴趣的读者可以自行阅读。简单来说,它为函数名加上了 __rct_export__ 前缀,再通过 runtime 获取类的函数列表,找出其中带有指定前缀的方法并放入数组中:</p>    <pre>  <code class="language-javascript">- (NSArray<id<RCTBridgeMethod>> *)methods{      unsigned int methodCount;      Method *methods = class_copyMethodList(object_getClass(_moduleClass), &methodCount); // 获取方法列表      for (unsigned int i = 0; i < methodCount; i++) {          RCTModuleMethod *moduleMethod = /* 创建 method */          [_methods addObject:moduleMethod];        }      }      return _methods;  }  </code></pre>    <p>因此 Objective-C 管理模块配置表的逻辑是:Bridge 持有一个数组,数组中保存了所有的模块的 RCTModuleData 对象。只要给定 ModuleId 和 MethodId 就可以唯一确定要调用的方法。</p>    <h3>初始化 JavaScript 代码的执行器,即 RCTJSCExecutor 对象</h3>    <p>通过查看源码可以看到,初始化 JavaScript 执行器的时候, addSynchronousHookWithName 这个方法被调用了多次,它其实向 JavaScript 上下文中添加了一些 Block 作为全局变量:</p>    <pre>  <code class="language-javascript">- (void)addSynchronousHookWithName:(NSString *)name usingBlock:(id)block {      self.context.context[name] = block;  }  </code></pre>    <p>有些同学读源码时可能会走进一个误区,如果在 Block 中打一个断点就会发现,Block 其实是被执行了,但却找不到任何能够执行 Block 的代码。</p>    <p>这其实是因为这个 Block 并非由 Objective-C 主动调用,而是在第五步执行 JavaScript 代码时,由 JavaScript 在上下文中获取到 Block 对象并调用,有兴趣的读者可以自行添加断点并验证。</p>    <p>这里我们需要重点注意的是名为 nativeRequireModuleConfig 的 Block,它在 JavaScript 注册新的模块时调用:</p>    <pre>  <code class="language-javascript">get: () => {        let module = RemoteModules[moduleName];      const json = global.nativeRequireModuleConfig(moduleName); // 调用 OC 的 Block      const config = JSON.parse(json); // 解析 json      module = BatchedBridge.processModuleConfig(config, module.moduleID); // 注册 config      return module;  },  </code></pre>    <p>这就是模块配置表能够加载到 JavaScript 中的原理。</p>    <p>另一个值得关注的Block 叫做 nativeFlushQueueImmediate 。实际上,JavaScript 除了把调用信息放到 MessageQueue 中等待 Objective-C 来取以外,也可以主动调用 Objective-C 的方法:</p>    <pre>  <code class="language-javascript">if (global.nativeFlushQueueImmediate &&        now - this._lastFlush >= MIN_TIME_BETWEEN_FLUSHES_MS) {      global.nativeFlushQueueImmediate(this._queue); // 调用 OC 的代码  }  </code></pre>    <p>目前,React Native 的逻辑是,如果消息队列中有等待 Objective-C 处理的逻辑,而且 Objective-C 超过 5ms 都没有来取走,那么 JavaScript 就会主动调用 Objective-C 的方法:</p>    <pre>  <code class="language-javascript">[self addSynchronousHookWithName:@"nativeFlushQueueImmediate" usingBlock:^(NSArray<NSArray *> *calls){      [self->_bridge handleBuffer:calls batchEnded:NO];  }];  </code></pre>    <p>这个 handleBuffer 方法是 JavaScript 调用 Objective-C 方法的关键,在下一节—— <strong>方法调用中</strong> ,我会详细分析它的实现原理。</p>    <p>一般情况下,Objective-C 会定时、主动的调用 handleBuffer 方法,这有点类似于轮询机制:</p>    <pre>  <code class="language-javascript">// 每个一段时间发生一次:  Objective-C:嘿,JavaScript,有没有要调用我的方法呀?    JavaScript:有的,你从 MessageQueue 里面取出来。    </code></pre>    <p>然而由于卡顿或某些特殊原因,Objective-C 并不能总是保证能够准时的清空 MessageQueue,这就是为什么 JavaScript 也会在一定时间后主动的调用 Objective-C 的方法。查看上面 JavaScript 的代码可以发现,这个等待时间是 5ms。</p>    <p>请牢牢记住这个 5ms,它告诉我们 JavaScript 与 Objective-C 的交互是存在一定开销的,不然就不会等待而是每次都立刻发起请求。其次,这个时间开销大约是毫秒级的,不会比 5ms 小太多,否则等待这么久就意义不大了。</p>    <h3>生成模块配置表并写入 JavaScript 端</h3>    <p>复习一下 nativeRequireModuleConfig 这个 Block,它可以接受 ModuleName 并且生成详细的模块信息,但在前文中我们没有提到 JavaScript 是如何知道 Objective-C 要暴露哪些类的(目前只是 Objective-C 自己知道)。</p>    <p>这一步的操作就是为了让 JavaScript 获取所有模块的名字:</p>    <pre>  <code class="language-javascript">- (NSString *)moduleConfig{      NSMutableArray<NSArray *> *config = [NSMutableArray new];      for (RCTModuleData *moduleData in _moduleDataByID) {        [config addObject:@[moduleData.name]];      }  }  </code></pre>    <p>查看源码可以发现,Objective-C 把 config 字符串设置成 JavaScript 的一个全局变量,名字叫做: __fbBatchedBridgeConfig 。</p>    <h3>执行 JavaScript 源码</h3>    <p>这一步也没什么技术难度可以,代码已经加载进了内存,该做的配置也已经完成,只要把 JavaScript 代码运行一遍即可。</p>    <p>运行代码时,第三步中所说的那些 Block 就会被执行,从而向 JavaScript 端写入配置信息。</p>    <p>至此,JavaScript 和 Objective-C 都具备了向对方交互的能力,准备工作也就全部完成了。</p>    <p>画了一个简陋的时序图以供参考:</p>    <p><img src="https://simg.open-open.com/show/2c017d4d542a0761737e2cb0f5398ff9.png"></p>    <h2>方法调用</h2>    <p>如前文所述,在 React Native 中,Objective-C 和 JavaScript 的交互都是通过传递 ModuleId 、 MethodId 和 Arguments 进行的。以下是分情况讨论:</p>    <h3>调用 JavaScript 代码</h3>    <p>也许你在其他文章中曾经多次听说 JavaScript 代码总是在一个单独的线程上面调用,它的实际含义是 Objective-C 会在单独的线程上运行 JavaScript 代码:</p>    <pre>  <code class="language-javascript">- (void)executeBlockOnJavaScriptQueue:(dispatch_block_t)block  {    if ([NSThread currentThread] != _javaScriptThread) {      [self performSelector:@selector(executeBlockOnJavaScriptQueue:)                   onThread:_javaScriptThread withObject:block waitUntilDone:NO];    } else {      block();    }  }  </code></pre>    <p>调用 JavaScript 代码的核心代码如下:</p>    <pre>  <code class="language-javascript">- (void)_executeJSCall:(NSString *)method               arguments:(NSArray *)arguments                callback:(RCTJavaScriptCallback)onComplete{      [self executeBlockOnJavaScriptQueue:^{          // 获取 contextJSRef、methodJSRef、moduleJSRef          resultJSRef = JSObjectCallAsFunction(contextJSRef, (JSObjectRef)methodJSRef, (JSObjectRef)moduleJSRef, arguments.count, jsArgs, &errorJSRef);          objcValue = /*resultJSRef 转换成 Objective-C 类型*/          onComplete(objcValue, nil);      }];  }  </code></pre>    <p>需要注意的是,这个函数名是我们要调用 JavaScript 的中转函数名,比如 callFunctionReturnFlushedQueue 。也就是说它的作用其实是处理参数,而非真正要调用的 JavaScript 函数。</p>    <p>这个中转函数接收到的参数包含了 ModuleId 、 MethodId 和 Arguments ,然后由中转函数查找自己的模块配置表,找到真正要调用的 JavaScript 函数。</p>    <p>在实际使用的时候,我们可以这样发起对 JavaScript 的调用:</p>    <pre>  <code class="language-javascript">[_bridge.eventDispatcher sendAppEventWithName:@"greeted"                                           body:@{ @"name": @"nmae"}];  </code></pre>    <p>这里的 Name 和 Body 参数分别表示要调用的 JavaScript 的函数名和参数。</p>    <h3>JavaScript 调用 Objective-C</h3>    <p>在调用 Objective-C 代码时,如前文所述,JavaScript 会解析出方法的 ModuleId 、 MethodId 和 Arguments 并放入到 MessageQueue 中,等待 Objective-C 主动拿走,或者超时后主动发送给 Objective-C。</p>    <p>Objective-C 负责处理调用的方法是 handleBuffer ,它的参数是一个含有四个元素的数组,每个元素也都是一个数组,分别存放了 ModuleId 、 MethodId 、 Params ,第四个元素目测用处不大。</p>    <p>函数内部在每一次方调用中调用 _handleRequestNumber:moduleID:methodID:params 方法。,通过查找模块配置表找出要调用的方法,并通过 runtime 动态的调用:</p>    <pre>  <code class="language-javascript">[method invokeWithBridge:self module:moduleData.instance arguments:params];  </code></pre>    <p>在这个方法中,有一个很关键的方法: processMethodSignature ,它会根据 JavaScript 的 CallbackId 创建一个 Block,并且在调用完函数后执行这个 Block。</p>    <h2>实战应用</h2>    <p>俗话说:“思而不学则神棍”,下面举一个例子来演示 Objective-C 是如何与 JavaScript 进行交互的。首先新建一个模块:</p>    <pre>  <code class="language-javascript">// .h 文件  #import <Foundation/Foundation.h>  #import "RCTBridgeModule.h"    @interface Person : NSObject<RCTBridgeModule, RCTBridgeMethod>    @end  </code></pre>    <p>Person 这个类是一个新的模块,它有两个方法暴露给 JavaScript:</p>    <pre>  <code class="language-javascript">#import "Person.h"  #import "RCTEventDispatcher.h"  #import "RCTConvert.h"    @implementation Person  @synthesize bridge = _bridge;    RCT_EXPORT_MODULE();    RCT_EXPORT_METHOD(greet:(NSString *)name)    {    NSLog(@"Hi, %@!", name);    [_bridge.eventDispatcher sendAppEventWithName:@"greeted"                                             body:@{ @"name": @"nmae"}];  }    RCT_EXPORT_METHOD(greetss:(NSString *)name name2:(NSString *)name2 callback:(RCTResponseSenderBlock)callback)    {    NSLog(@"Hi, %@! %@!!!", name, name2);    callback(@[@[@12,@23,@34]]);  }    @end  </code></pre>    <p>在 JavaScript 中,可以这样调用:</p>    <pre>  <code class="language-javascript">Person.greet('Tadeu');    Person.greetss('Haha', 'Heihei', (events) => {      for (var i = 0; i < events.length; i++) {      console.log(events[i]);    }  });  </code></pre>    <p>有兴趣的同学可以复制以上代码并自行调试。</p>    <h2>React Native 优缺点分析</h2>    <p>经过一长篇的讨论,其实 React Native 的优缺点已经不难分析了,这里简单总结一下:</p>    <h3>优点</h3>    <ol>     <li>复用了 React 的思想,有利于前端开发者涉足移动端。</li>     <li>能够利用 JavaScript 动态更新的特性,快速迭代。</li>     <li>相比于原生平台,开发速度更快,相比于 Hybrid 框架,性能更好。</li>    </ol>    <h3>缺点</h3>    <ol>     <li> <p>做不到 Write once, Run everywhere ,也就是说开发者依然需要为 iOS 和 Android 平台提供两套不同的代码,比如参考 <a href="/misc/goto?guid=4959643958079565672" rel="nofollow,noindex">官方文档</a> 可以发现不少组件和API都区分了 Android 和 iOS 版本。即使是共用组件,也会有平台独享的函数。</p> </li>     <li> <p>不能做到完全屏蔽 iOS 端或 Android 的细节,前端开发者必须对原生平台有所了解。加重了学习成本。对于移动端开发者来说, <strong>完全不具备</strong> 用 React Native 开发的能力。</p> </li>     <li> <p>由于 Objective-C 与 JavaScript 之间切换存在固定的时间开销,所以性能必定不及原生。比如目前的官方版本无法做到 UItableview(ListView) 的视图重用,因为滑动过程中,视图重用需要在异步线程中执行,速度太慢。这也就导致随着 Cell 数量的增加,占用的内存也线性增加。</p> </li>    </ol>    <p>综上,我对 React Native 的定位是:</p>    <p>利用脚本语言进行原生平台开发的一次成功尝试,降低了前端开发者入门移动端的门槛,一定业务场景下具有独特的优势,几乎不可能取代原生平台开发。</p>    <p> </p>    <p>来自: <a href="/misc/goto?guid=4959674293789468212" rel="nofollow">https://bestswifter.com/react-native/</a></p>    <p> </p>