理解React
React 是一套可以用简洁的语法高效绘制 DOM 的框架。
- JSX 允许我们写 HTML 标签或 React 标签,封装成component使用,它们终将被转换成原生的 JavaScript 并创建 DOM。
- 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 有哪些方法可以调用。
接下来我们举个