RN 渲染原理：不依赖WebView，原生控件渲染

React NativeRN的渲染原理可以概括为RN 不依赖 WebView而是使用原生控件Native Views进行渲染。具体原理如下1. JavaScript 层开发者使用 JavaScriptReact编写 UI。例如View TextHello React Native/Text /View这里的View、Text并不是 HTML 标签而是 React Native 提供的组件。2. React 生成虚拟树Virtual TreeReact 根据 JSX 构建组件树并通过 Diff 算法计算哪些地方发生了变化。JSX │ ▼ React Fiber │ ▼ Virtual Tree3. Bridge旧架构或 JSI/Fabric新架构RN 不会把页面放进 WebView。而是把需要创建、更新控件的信息发送给原生。旧架构JavaScript │ ▼ Bridge │ ▼ Native(UI)Bridge 采用异步通信。新架构Fabric JSIJavaScript │ ▼ JSI │ ▼ Fabric Renderer │ ▼ Native UIJSI 不需要传统 Bridge通信效率更高延迟更低。4. 原生创建真正的控件RN 最终调用的是系统原生控件而不是浏览器 DOM。例如RN组件AndroidiOSViewandroid.view.ViewUIViewTextTextViewUILabelTextInputEditTextUITextFieldImageImageViewUIImageView所以用户看到的是系统真正的原生界面。5. GPU 渲染原生控件最终交给系统渲染RN JS │ React Fiber │ Bridge / JSI │ Native View │ Android View 或 UIView │ GPU │ 屏幕为什么说 RN 不依赖 WebViewReact Native 与传统 Hybrid如早期 Cordova、PhoneGap最大的区别就是React NativeWebView Hybrid使用原生控件使用 HTML CSS没有 DOM有 DOM不运行在浏览器运行在 WebView 中调用系统控件页面由浏览器内核绘制性能接近原生性能受 WebView 限制例如TextHello/TextReact Native最终渲染为 Android 的TextView或 iOS 的UILabel。WebView最终渲染为 HTML 的span或div由浏览器引擎如 Chromium/WebKit绘制。因此React Native 的核心特点就是不依赖 WebView而是通过原生渲染引擎将 React 组件映射为平台原生控件从而获得接近原生应用的性能和体验。