近段时间来，关于移动客户端方面的动态化解决方案有了不少。之前的JSPatch，滴滴的解决方法：DynamicCocoa，微信iOS开发团队的解决方案：OCS。而今天需要说道的是React Native。
1. 背景
首先简单介绍下滴滴和微信的解决方案。
-
1.1 DynamicCocoa
DynamicCocoa 可以让现有的 Objective-C 代码转换生成中间*代码（JS），下发后动态执行，相比其他动态化方案，优势在于：- 使用原生技术栈：使用者完全不用接触到 JS 或任何中间代码，保持原生的 Objective-C 开发、调试方式不变
- 无需重写已有代码：已有 native 模块能很方便的变成动态化插件
- 语法支持完备性高：支持绝大多数日常开发中用到的语法，不用担心这不支持那不支持
- 支持 HotPatch：改完 bug 后直接从源码打出 patch，一站式解决动态化和热修复需
最重要DynamicCocoa有一下特点：
- 完整的 Class 定义：interface、category、class extension、method、property，最重要的是支持完备的 ivar 定义，保持和 native 完全一致的实例内存结构
- ARC：可以正确处理 strong、weak、unsafe_unretained 等对象的引用计数，对象的 ivar 也可以正确的释放
- C 函数：支持 C 函数的定义与 C 函数的调用、内联函数的调用
- 可变参数：支持 C 与 OC 的可变参数方法的调用，如 NSLog
- struct：支持任意结构体的使用，无需额外处理
- block：支持创建和调用任意参数类型的 block
- 其他 OC 特性：如 @selector、@protocol、@encode、for..in 等
- 其他 C 特性：支持使用宏、static 变量、全局变量，取地址等
-
1.2 OCS
OCS是全新设计的iOS动态化方案。我们定义了一套精确描述OC语义的字节码指令集(OCScript)，开发了一套全自动编译器（OCSCompiler），实现了一个高性能的虚拟机（OCSVM）以及一个可以跟底层无缝对接的桥接器(OCSBridge)。我们首先使用OCS编译器把OC源码转化成OCS字节码，然后通过OCS桥接器实现OCS虚拟机与Native运行时的互联，最后使用OCS虚拟机对OCS字节码进行解释运算，并驱动Native运行时完成逻辑的执行，以此达到Native代码动态化的效果。OCS被用于iOS APP安装包减包、功能插件化、HotPatch等方方面面动态化需求。- OCS有哪些与众不同之处
- 语义与OC保持严格一致
OCS字节码指令集语义与OC/的语义保持严格一一对应关系，支持的数据类型也完全等同，运行过程无需进行任何转换，因此效率非常高。 - 自动化工具支持
OCS拥有完善的自动化工具链，OCS编译器支持绝大多数OC/C语法的转化，包括C方法、任意自定义结构体、任意自定义block。对于少数不支持的的语法，可以准确报错，引导用户进行规避，避免产生未定义行为。OCS编译器还可以准确识别OC/C代码的内存管理语义，可以正确生成内存管理相关的代码。特别对于ARC来说，可以准确生成Retain、Release代码，正确插入到生成代码中去。 - 原生OC内存管理机制
OCS虚拟机完全支持Native的内存管理机制，可以在正确的时机执行正确的内存释放逻辑，绝无延迟操作，彻底杜绝了Crash和爆内存风险的引入。 - 抢占式多线程
OCS虚拟机支持Native的抢占式多线程线程管理支持，完全支持Pthread、 GCD、 NSOperationqueue、 NSThread等各种线程模型，完全避免了额外引入Crash、卡顿与死锁风险。 - 高性能汇编ABI
OCS桥接器根据过程调用约定实现自定义OCSABI，使得虚拟机与Native底层实现直接通信，保证Native代码动态化引入额外性能损耗最小化，使得OCS动态化不仅普遍适用于普通逻辑转化，对于对性能要求苛刻的有复杂排版的滑动列表，OCS也有极佳的表现，动态化后掉帧率增长量几乎可以忽略不计
- 语义与OC保持严格一致
- OCS有哪些与众不同之处
ps:OCS完整介绍
-
1.3 ReactNative
React Native 让开发者使用 JavaScript 和 React 编写应用，利用相同的核心代码就可以创建 Web，iOS 和 Android 平台的原生应用。React Native 的宗旨是，学习一次，高效编写跨平台原生应用。- React Native有什么优点
-
提供了原生的控件支持
使用 React Native 你可以使用原生的控件，入在iOS平台我们可以使用UITabBar控件，在Android平台我们可以使用Drawer控件。这样，就让我们的App从使用上和视觉上拥有像原生App一样的体验。而且使用起来也非常简单。 -
异步执行
所有的JavaScript逻辑与原生的代码逻辑都是在异步中执行的。原生的代码逻辑当然也可以添加自己的额外的线程。
这个特性意味着，我们可以将图片解码过程的线程从主线程中抽离出来，在后台线程将其保存在磁盘中，在不影响UI的情况下计算调整布局等等。所以，这些让React Native开发出来的App都是较为的流畅。
这个之间的通信过程也是有序列化来完成的，这个就让我们可以使用Chrome Developer Tools 来完成JavaScript逻辑的调试，当然我们也能够在模拟器和物理设备上调试。 -
触屏处理 React Native实现了高性能的图层点击与接触处理。
-
Flexbox的布局样式 使布局将变得更简单，这就使我们为什么要将网页的布局模式切换到React Native的Flexbox布局模式。Flexbox让UI布局变得简单，入使用margin和padding的嵌套模式。当然，React Native 同样也支持网页原生的一些属性布局模式，如FontWeight之类的。这些声明的布局和样式，都会存在内联的机制将其优化。
-
Polyfills机制 React Native也支持我们使用第三方的JavaScript库，来方便我们的开发。支持npm中的成千上万的模块。
-
基于React JS 拥有React JS的优良特性。
-
- React Native有什么优点
2. 抉择
通过上面的简单介绍，可以看出DynamicCocoa和OCS都还是很厉害的。对于iOS开发人员，可以不需要去花费过多的时间来学习其他语言，使用原生的Object-C也可以基本完成动态化。然后在实际开发中，以及实际的项目中，功能不仅仅是在iOS平台上面，同时在Android中也需要。这个时候就比较尴尬了。但是ReactNative却不一样，他是跨平台的，可以同时支持iOS和Android，同时可以达到原生的效果（虽然和其他两个的性能上还是有些差距），而且现在的手机性能都在不断提升，利弊权衡下，个人觉得ReactNative相对是更优选择。
3. ReactNative应用
这里主要相对于现有工程
- 3.1 在现有工程中添加ReactNative
条件: - 1、CocoaPods
- 2、Node.js
步骤:
- 1、工程根目录下创建ReactComponent
- 2、在ReactComponent目录中创建JS文件（例如:index.ios.js），并初始化
npm init
- 3、通过CocoaPods安装ReactNative库
def react_native
# 取决于你的工程如何组织，你的node_modules文件夹可能会在别的地方。
# 请将:path后面的内容修改为正确的路径（一定要确保正确～～）。
pod 'React', :path => ‘./ReactComponent/node_modules/react-native', :subspecs => [
'Core',
'ART',
'RCTActionSheet',
'RCTAdSupport',
'RCTGeolocation',
'RCTImage',
'RCTNetwork',
'RCTPushNotification',
'RCTSettings',
'RCTText',
'RCTVibration',
'RCTWebSocket',
'RCTLinkingIOS',
]
end
- 4、执行CocoaPods
pod install
- 5、添加原生代码
NSString * strUrl = @"http://127.0.0.1:8081/index.ios.bundle?platform=ios&dev=true";
NSURL * jsCodeLocation = [NSURL URLWithString:strUrl];
RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
moduleName:@"AwesomeProject"
initialProperties:nil
launchOptions:nil];
self.view = rootView;
- 6、运行react
npm start
- 7、运行原生应用(Run)
4. ReactNative发布
在技术上来讲当然可以把react程序放在服务器上，但是加载速度就比较慢，在用户体验上当然也会减分不少。因此可以通过打离线包(jsbundle)的方式,通过服务端控制来实现程序的动态化（类似JSPatch发布机制）。
- ReactNative离线打包
我们用‘react-native bundle’命令把JS代码打包成一个bundle文件。然后客户端直接访问这个bundle文件即可。
命令说明
react-native bundle
Options:
| 命令 | 枚举 | 解释 |
|---|---|---|
| --entry-file | index.ios.js | 入口文件 |
| --platform | "ios"/"android" | 平台 |
| --transformer | /packager/transformer.js | transformer |
| --dev | false /true | 调试开关 |
| --prepack | false/true | |
| --bridge-config | ||
| --bundle-output | 路径 | bundle包目标路径 |
| --assets-dest | 资源文件路径 | 资源文件路径 |
- 修改原生代码
NSURL * jsCodeLocation = [[NSBundle mainBundle ] URLForResource:@"main" withExtension:@"jsbundle"];
RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation moduleName:@"AwesomeProject" initialProperties:nil launchOptions:nil];
self.view = rootView;
网友评论