原文地址：https://www.zoucz.com/blog/2024/01/27/682a7050-bf98-11ee-8eb9-6929c410dc79/，参与评论

前面提到，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)