ReactNative 原理解析-通信

2021-08-23 15:04:53 浏览数 (1)

理解React

React 是一套可以用简洁的语法高效绘制 DOM 的框架。

  1. JSX 允许我们写 HTML 标签或 React 标签,封装成component使用,它们终将被转换成原生的 JavaScript 并创建 DOM。
  2. React 独创了 Virtual DOM 机制,高效绘制DOM。

我们可以暂时放下 HTML 和 CSS,只关心如何用 JavaScript 构造页面。

ReactNative

类比React,我们也可以暂时放下Native的代码(OC/JAVA),只关心如何用 JavaScript 构造页面。

这是一个面向前端开发者的框架。它的宗旨是让前端开发者像用 React 写网页那样,用 React Native 写移动端应用,能够用同样的语法、工具等,分别开发安卓和 iOS 平台的应用并且不用一行原生代码。

如果用一个词概括 React Native,那就是:Native 版本的 React

原理概述

首先要明白的一点是,即使使用了 React Native,我们依然需要 UIKit 等框架,调用的是 Objective-C 代码。总之,JavaScript 只是辅助,它只是提供了配置信息和逻辑的处理结果。React Native 与 Hybrid 完全没有关系,它只不过是以 JavaScript 的形式告诉 Objective-C 该执行什么代码。

JavaScript 是一种单线程的语言,它不具备自运行的能力,因此总是被动调用。很多介绍 React Native 的文章都会提到 “JavaScript 线程” 的概念,实际上,它表示的是 Objective-C 创建了一个单独的线程,这个线程只用于执行 JavaScript 代码,而且 JavaScript 代码只会在这个线程中执行。

其次,React Native 能够运行起来,全靠 Objective-C 和 JavaScript 的交互。

React Native通信机制

由于 JavaScriptCore 是一个面向 Native 的框架,在 Objective-C 这一端,我们对 JavaScript 上下文知根知底,可以很容易的获取到对象,方法等各种信息,当然也包括调用 JavaScript 函数。举个例子:

代码语言:javascript复制
JSContext *context = [[JSContext alloc] init];
JSValue *jsVal = [context evaluateScript:@"21 7"];
int iVal = [jsVal toInt32];

真正复杂的问题在于,JavaScript 不知道 Objective-C 有哪些方法可以调用。

接下来我们举个

0 人点赞