跨端演进
跨端技术的发展经历了几个阶段。最初，应用通过嵌入浏览器来实现，即使用 WebView，它移除了浏览器的菜单，用于加载 HTML、CSS 和 JavaScript。这为混合开发方案奠定了基础。
混合方案主要包括 WebView 嵌入式浏览器和 JSBridge。WebView 包含 JavaScript 解析器，如 Chrome 的 V8、Firefox 的 SpiderMonkey 或 Safari 的 JSCore，但手势支持可能不佳。为了增强功能，JSBridge 作为中间件，允许 Web 端与原生应用通信，实现拍照等原生功能。这种方案的优势在于无需频繁打包发版。
React Native 方案则更进一步。常见流程是：使用 ReactJS 进行开发，包括导航器、UI 组件和异步请求库如 Axios，然后通过 JSCore 解析器编译 JavaScript，再经由 JSBridge 提供宿主环境以调用原生功能，同时利用 Shadow Tree 进行渲染，并通过 NativeModule 实现原生渲染，最终输出到原生端。最新方案尚未完全实现，它计划通过 Codegen 翻译 JavaScript，再通过 JSI 转为 C++，然后由 Fabric 架构处理差异算法，Yoga 引擎负责布局渲染，最终渲染到原生平台。
React Native 的使用
在 React Native 中，应用启动通过 AppRegistry.registerComponent 注册组件。该函数存储组件并调用 renderApplication 加载应用，进而触发 React Native 的渲染流程，包括 beginWork 和 completeWork 阶段。在 completeWork 阶段，createInstance 调用 ReactNativePrivateInterface.UIManager.createView，在宿主环境中通过 UIManager 创建视图。以下是一个代码示例：
import {AppRegistry} from 'react-native';
import {name as appName} from './app.json';
import App from './preSrc/index';
AppRegistry.registerComponent(appName,()=>App)
与 React 的区别在于渲染阶段：React 在 completeWork 阶段调用 document.createElement，而 React Native 调用 ReactNativePrivateInterface.UIManager.createView。这一变动凸显了渲染库的重要性，其他框架如 Taro 也类似地调整了渲染方式。
基础拓展
前端开发本质涉及两个核心部分：JavaScript 引擎负责翻译和执行代码，而宿主环境提供能力，如通过 API 调用操作硬件。例如，console.log 需要执行环境来输出效果。前端代码通过引擎解析，并由宿主环境提供 window、document 等 API 实现交互。
跨端框架如 UniApp 基于 Weex，提供了类似的解析和宿主环境。在 React 生态中，核心库包括 React Core 提供 API 和虚拟 DOM 转换，React Reconciler 处理调和过程，而渲染库如 React DOM 负责浏览器渲染，通过 hostConfig 配置。Taro 作为渲染库，实现了小程序的渲染能力，与 React DOM 同级。
React 的设计理念与宿主环境
React 的设计理念清晰：React Core 提供核心功能，React Renderer 负责渲染，React Reconciler 处理调和。宿主环境多样，包括 DOM 对应 react-dom，混合开发对应 React Native，而微应用场景则由 Taro 等框架支持。这种分离使得 React 能够灵活适应不同平台。