前面提到,react 的核心模块是可以做到平台无关的,在做 fiber 树渲染的时候,再根据需求选择在浏览器上渲染 DOM,还是在服务端渲染生成 html 字符,或者是在其它实现 HostConfig 协议的场景实现任意端的渲染。
在服务端渲染时, nodejs 天然提供了 js 运行环境,同时服务端也不需要真正渲染出 UI,只需要给出 html 字符串,或者 html 流就行,真正的渲染仍然交给浏览器。和在nodejs服务端的运行不同,终端上运行时,要解决的问题更多,包括如何渲染 UI、如何运行 JS,JS 如何与终端通信等。
本文从 UI 渲染、JS运行时、JS和终端通信机制 等方面,描述 React Native 的实现原理,并简单介绍其它几款和 react 相关的跨端渲染框架。
1. React Native
https://github.com/facebook/react-native
UI渲染
React Native 使用原生平台的 UI 组件进行渲染,它将 JavaScript 中的 React 组件映射到相应的原生 UI 组件。这种方式能让整体渲染体验达到接近原生的效果,同时能在一定程度上将代码在多端复用(仍然存在一些小的细节需要不同平台各自适配)。
渲染环节涉及三个线程。
- UI 线程(主线程):唯一可以操作宿主视图的线程。负责
- JavaScript 线程:这是执行 React 渲染阶段的地方。
- 后台线程:专门用于布局的线程。
实现跨端 UI 渲染的过程
其中,Fabric 是 React Native 新架构的渲染系统。其核心原理是在 C++ 层统一更多的渲染逻辑,提升与宿主平台(host platforms)互操作性,并为 React Native 解锁更多能力。其研发始于 2018 年。从 2021 年开始, Facebook App 中的 React Native 启用了新的渲染器。
事件触发 Fabric 渲染的过程,渲染可以分为三个步骤
- 渲染(Render):在 JavaScript 中,React 执行那些产品逻辑代码创建 React 元素树(React Element Trees)。然后在 C++ 中,用 React 元素树创建 React 影子树(React Shadow Tree)。
- 提交(Commit):在 React 影子树完全创建后,渲染器会触发一次提交。这会将 React 元素树和新创建的 React 影子树的提升为“下一棵要挂载的树”。 这个过程中也包括了布局信息计算。
- 挂载(Mount):React 影子树有了布局计算结果后,它会被转化为一个宿主视图树(Host View Tree)。
https://reactnative.cn/architecture/render-pipeline
JS 引擎
根据版本和运行环境不同, React Native 可能使用三种 JS 引擎
- 从 React Native 0.70 版本开始,默认使用 Hermes 引擎,它是专门为 React Native 而优化的一个开源 JavaScript 引擎。
- 如果 Hermes 被禁用或是较早的 React Native 版本,则会使用JavaScriptCore,也就是 Safari 所使用的 JavaScript 引擎。但是在 iOS 上 JavaScriptCore 并没有使用即时编译技术(JIT),因为在 iOS 中应用无权拥有可写可执行的内存页(因此无法动态生成代码)。
- 在使用 Chrome 调试时,所有的 JavaScript 代码都运行在 Chrome 中,并且通过 WebSocket 与原生代码通信。此时的运行环境是V8 引擎。(社区也有提供可以在生产环境中使用的react-native-v8)
JS和终端通信
JS 和终端通信有属性传递、事件、JsBrige 等多种方式。
- 原生组件属性、RN组件属性互相传递
- 原生组件到RN组件的事件通信
- RN组件到原生组件通过 JsBrige 直接调用方法。
- 新架构的 JSI(JavaScript Interface) ,JS 和 C++ 互相持有对象引用并调用方法
值得注意的是,这些通信都是异步的,以提高性能。
参考:
- https://reactnative.cn/docs/communication-android
- https://reactnative.cn/docs/communication-ios
- https://reactnative.cn/docs/the-new-architecture/why
2. 其它支持 react 的跨端框架
Taro
https://github.com/nervjs/taro
Taro 是一个开放式跨端跨框架解决方案,支持使用 React/Vue/Nerv 等框架来开发 微信 / 京东 / 百度 / 支付宝 / 字节跳动 / QQ / 飞书 小程序 / H5 / RN 等应用。
来源:https://www.w3.org/2022/09/hangzhou/miniapps/slides/jiajian.pdf
Hippy
https://github.com/Tencent/Hippy
Hippy 是腾讯开源的一款跨端渲染框架,支持 react 和 vue。从底层进行了大量优化,在启动速度、可复用列表组件、渲染效率、动画速度、网络通信等方面都提供了业内顶尖的性能表现。
Hippy 3.0 的升级中,业务层上不再局限于 JS 驱动,也支持切换其它任意 DSL 语言进行驱动;在渲染层中,渲染引擎除了支持现有原生(Native)渲染之外,还可以选择其他渲染 Renderer,如 Flutter(Voltron) 渲染。
本文链接:https://www.zoucz.com/blog/2024/01/27/682a7050-bf98-11ee-8eb9-6929c410dc79/