react
RN框架
框架
- js层 该层提供了各种供开发者使用的组件以及一些工具库（事件分发等）。
- C++层 主要处理java/OC与js的通信（JSBridge）以及执行JavaScript（JS脚本引擎）。
- Native层（Object C/Java层） 主要包括UI渲染器、网络通信等工具库。根据不同操作系统有不同的实现。
UI
基于react框架(虚拟dom)
- 首先Js层通过jsx编写的Virtual Dom来构建Component
- Native层将其转成真实DOM插入到原生 App 的页面中。
- 当有变更，通过diff算法生成差异对象
- 最终由 Native层将差异对象应用到原生App的页面元素上。
通信
基于JSCore实现js与java/oc交互
- 把JSX代码解析成javaScript代码
- 读取JS文件，并利用利用JS脚本引擎执行
- 返回一个数组，数组中会描述OC/Java对象，描述对象属性和所需要执行的方法，这样就能让这个对象设置属性，并且调用方法。
优缺点
优势
- 原生渲染->native体验
- react方便前端开发
- hybrid技术跨平台开发,成本及难度低于原生
- 热更新方便迭代
劣势
- 支持的样式是 CSS 的子集，会满足不了 Web 开发者日渐增长的需求；
- 现有能力下还存在的一些不稳定问题，比如性能、Bug等。
- 把渲染工作全都交由客户端原生渲染，会有更接近原生的体验，但实际上一些简单的界面元素使用 Web 技术渲染完全能胜任
小程序底层框架
双线程架构
- 渲染层使用WebView渲染WXML+WXSS
- 逻辑层使用JsCore执行js脚本
- webview线程隔离,一个界面一个webview线程
- 线程通信经由微信native
- 逻辑层网络请求经由微信native转发
原因
- UI渲染跟 JavaScript 的脚本执行分别在两个线程，从而避免一些逻辑任务抢占UI渲染的资源。
- 为了解决管控与安全问题，提供一个沙箱环境来运行开发者的JavaScript 代码（逻辑层），从而阻止开发者使用一些浏览器提供的，诸如跳转页面、操作DOM、动态执行脚本的开放性接口。
- 渲染层和逻辑层的分离也给在不同的环境下（小程序与小程序开发者工具）运行提供了可能性
UI
1.页面渲染
1.在渲染层，宿主环境会把WXML可以先转成JS对象，然后再渲染出真正的Dom树。
2.在逻辑层发生数据变更的时候，需要通过宿主环境提供的setData方法把数据从逻辑层传递到渲染层
3.对比前后差异，把差异应用在原来的Dom树上，渲染出正确的UI界面
2.组件系统
Exparser组件框架+原生组件
原生组件渲染时
1.渲染层webview创建组件，插入到DOM树中后计算布局(位置与宽高)
2.通过通信机制通知Native，Native会根据布局插入一块原生区域并渲染
3.当webview得知位置或宽高发生变化时，通知Native做相应的调整
通信
视图层客户端(大部分原生组件涉及)
- iOS 利用WKWebView 的提供 messageHandlers 特性
- 安卓则是往 WebView 的 window 对象注入一个原生方法，最终会封装成 WeiXinJSBridge 这样一个兼容层
逻辑层客户端
- iOS平台可以往JavaScripCore框架注入一个全局的原生方法
- 安卓方面则是跟渲染层一致的
开发者工具
- 开发者工具中，逻辑层实际上是使用一个隐藏着的标签来模拟JSCore的。并通过将JSCore中不支持的BOM对象局部变量化，使得开发者无法在小程序代码中正常使用BOM，从而避免不必要的错误
- 开发者工具底层维护着一个WebSocket服务器，用于在WebView与开发者工具之间建立可靠的消息通讯链路，使得接口调用，事件通知，数据交换能够正常进行，从而使小程序模拟器成为一个统一的整体
优缺点
优势:渲染层和逻辑层分离->渲染快、加载快
劣势:线程通信延时,setData没有diff操作,频繁操作会有明显性能问题
总结
相同点
- 都具有hybrid技术的优点
- 接近原生的体验
- 跨平台开发
- 使用Web 相关技术框架来编写业务代码
- 各自实现了跨语言通讯方案完成Native(Java/Objective-c/…)端与JavaScript(小程序中为渲染层和逻辑层)的通讯
不同点
渲染
- 小程序使用浏览器内核来渲染界面(小部分原生组件由客户端参与渲染)，界面主要由成熟的Web技术渲染，辅之大量的接口提供丰富的客户端原生能力
- RN是客户端原生渲染
分享到:
閱讀更多 薛定喵君 的文章
