react（三） 跨端应用框架

作者: 邹成卓 2024-01-27 19:52:59 分类: 前端开发

标签: react, 前端开发

评论数:

前面提到，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 我要说话

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 我要说话

根据版本和运行环境不同， 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++ 互相持有对象引用并调用方法

值得注意的是，这些通信都是异步的，以提高性能。 我要说话

参考： 我要说话

2. 其它支持 react 的跨端框架

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/我要说话

☞ 参与评论我要说话