深入理解React Native页面构建渲染原理

2017-01-14 19:50:12来源:CSDN作者:xiangzhihong8人点击

前言

React Native 是最近非常火的一个话题,因为它的语法简介,跨平台等特性,赢得了各大平台的青睐,虽然前期是有一些坑。

原理简析

React 是一套可以用简洁的语法高效绘制 DOM 的框架,所谓的“高效”,是因为 React 独创了 Virtual DOM 机制。Virtual DOM 是一个存在于内存中的 JavaScript 对象,它与 DOM 是一一对应的关系,也就是说只要有 Virtual DOM,我们就能渲染出 DOM。当界面发生变化时,得益于高效的 DOM Diff 算法,我们能够知道 Virtual DOM 的变化,从而高效的改动 DOM,避免了重新绘制 DOM。

我们知道React是一个专注于 UI 部分框架,对应到 MVC 结构中就是 View 层。要想实现完整的 MVC 架构,还需要 Model 和 Controller 的结构。在前端开发时,我们可以采用 Flux 和 Redux 架构,它们并非框架(Library),而是和 MVC 一样都是一种架构设计(Architecture)。

我们知道React Native之所以能再Android/ios等移动设备上运行起来,是因为react native和原生设备之间有一种交互,以ios为例,JavaScript 的形式告诉 Objective-C需要执行什么,然后ios自己去调用 UIKit 等框架绘制界面。所以,React Native 能够运行起来,全靠 Objective-C 和 JavaScript 的交互。

我们知道 C 系列的语言,经过编译,链接等操作后,会得到一个二进制格式的可执行文,所谓的运行程序,其实是运行这个二进制程序。而 JavaScript 是一种脚本语言,它不会经过编译、链接等操作,而是在运行时才动态的进行词法、语法分析,生成抽象语法树(AST)和字节码,然后由解释器负责执行或者使用 JIT 将字节码转化为机器码再执行。整个流程由 JavaScript 引擎负责完成。

苹果提供了一个叫做 JavaScript Core 的框架,这是一个 JavaScript 引擎。通过下面这段代码可以简单的感受一下 Objective-C 如何调用 JavaScript 代码:

JSContext *context = [[JSContext alloc] init];  JSValue *jsVal = [context evaluateScript:@"21+7"];  int iVal = [jsVal toInt32];  

JavaScript 是一种单线程的语言,它不具备自运行的能力,因此总是被动调用。很多介绍 React Native 的文章都会提到 “JavaScript 线程” 的概念,实际上,它表示的是 Objective-C 创建了一个单独的线程,这个线程只用于执行 JavaScript 代码,而且 JavaScript 代码只会在这个线程中执行。
要完全理解JavaScript和Objective-C之前的交互,可以看我之前关于这方面吗的介绍React native和原生之间的通信

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台