约 10 分钟7 张卡

React Native 渲染

React Native 渲染把 React 组件描述转换为 Android、iOS 等平台上的界面。React 负责组件与更新，React Native 的渲染器把变化交给宿主平台；写的是 JSX，不意味着最终生成 HTML 或 DOM。

本文以 React Native 0.76.9、React 18 为基线。这一代默认启用新架构，项目仍需检查实际构建配置和依赖的兼容情况。理解渲染链路，才能解释状态更新后为什么要经过布局和挂载，以及为什么 JS 计算、原生调用和屏幕更新会有不同的阻塞来源。

1. 面试核心

先记住这几条，再读正文

组件描述、布局数据和原生视图是不同对象。函数组件不必对应原生控件，布局节点也可能在挂载时被扁平化。卡 · 三种树的责任
Fabric 是新架构的渲染器，JSI 是 JS 与 C++ 交互的接口。Hermes 执行 JavaScript，TurboModules 组织原生能力，它们不能互相替代。卡 · 新旧架构的职责
渲染阶段决定下一份界面，挂载阶段修改宿主视图。布局与树比较也有成本，组件函数执行不等于屏幕立刻变化。卡 · Render、Commit 与 Mount
原生视图操作在 UI 线程执行，其他工作不能机械绑定到三条固定线程。新架构可以根据调度条件安排渲染与布局。卡 · 谁可以修改原生视图
React Native 样式和布局不等同于浏览器 CSS。布局依赖 Yoga、约束与平台测量，文本和输入还涉及平台行为。卡 · 布局与平台测量
状态身份仍由 React 的类型、位置和 key 等规则决定。这些规则可以复用，DOM API 和浏览器事件机制需要重新判断。卡 · 状态身份与平台 API 分开判断
新架构支持更灵活的调度，但不消除应用自身的同步耗时。JSI、并发渲染和原生控件都不是自动流畅的保证。卡 · 并发不等于任意代码都可中断

2. React 组件与宿主界面

2.1 JSX 描述什么

宿主组件是渲染器能直接连接到目标平台的界面组件，例如 React Native 的 View 和 Text。业务函数组件通过组合它们描述界面，本身不必新增一层原生视图。

下面的 CounterPanel 使用 React 状态，但界面由 React Native 组件组成：

import React, {useState} from 'react';
import {Pressable, Text, View} from 'react-native';

export function CounterPanel({label}: {label: string}) {
  const [count, setCount] = useState(0);
  return (
    <View>
      <Text>{label}: {count}</Text>
      <Pressable
        accessibilityRole="button"
        accessibilityLabel="增加"
        onPress={() => setCount(value => value + 1)}>
        <Text>增加</Text>
      </Pressable>
    </View>
  );
}

点击后，setCount 请求下一次状态更新；React 重新计算组件描述，渲染器把需要的变化应用到原生界面。函数式更新读取队列中的前一状态，相关规则见 React 组件。

这里没有 div、document.querySelector 或 HTML 点击事件。Text 承载文本，Pressable 处理按压交互；即使名字或用途与 Web 组件相似，也不能直接套用 DOM 的 API。

2.2 React Native 与 WebView 的区别

WebView 由 Web 引擎处理网页的 HTML、CSS、JavaScript 和绘制。React Native 的基本界面则通过渲染器连接平台组件，不是默认把整棵组件树塞进一个网页。

两者可以同时存在：一个 React Native 页面可以嵌入 WebView 展示网页。判断项目采用哪种机制，要看这块界面实际由谁布局、绘制和处理交互，不能只看项目名称。WebView 的实现与对应比较题见 Android WebView。

原生组件也不等于零成本。React 计算、布局、视图层级、图片和业务代码都需要资源，性能不能只根据框架名称排序。

3. 新旧架构的职责

卡 · Hermes、JSI、Fabric 和 TurboModules 分别负责什么？

3.1 几个名称对应不同层次

名称	主要职责	不应据此推导的结论
React	组件、状态、协调与更新调度	React 本身决定了 Android 控件如何绘制
Hermes	执行 JavaScript 的引擎	Hermes 就是 UI 渲染器
JSI	提供 JS 运行时与 C++ 交互的接口	每次调用都自动进入后台线程
Fabric	新架构中的原生渲染器	Fabric 负责所有设备能力调用
TurboModules	新架构的原生模块系统	模块支持同步访问就应执行长时间同步任务
Yoga	根据布局属性与约束计算几何信息	Yoga 完成所有文本测量和像素绘制

这些部分共同参与一个应用，但解决不同问题。比如更换 JS 引擎不会让业务组件自动变成另一种原生控件；原生模块能访问蓝牙，也不意味着它负责页面布局。

3.2 Legacy Bridge 与新架构

旧架构中的常规 JS 与原生调用依赖异步 Bridge：调用信息编码后排队，另一侧再处理。频繁、小批量的往返和大数据传递会增加通信成本。不过旧原生模块 API 也存在受限制的同步方法，不能把“旧架构的常规路径异步”说成历史上任何接口都绝不可能同步。

新架构通过 JSI 等机制连接 JS 与 C++，Fabric 使用共享的 C++ 渲染核心，原生模块也有类型契约与按需加载机制。它不再要求所有正常调用都走旧式异步 Bridge，但仍然需要处理参数、对象生命周期、任务调度和平台边界。

React Native 0.76 默认启用新架构，并提供兼容旧库的互操作能力。兼容层有适用限制；“能够启动”不等于所有库都已迁移，也不代表可以无条件使用新架构的全部并发能力。面试解释旧项目时，应先说明项目版本、是否启用新架构及相关库实际采用的接口。

4. Fabric 的渲染链路

卡 · React 元素树、Shadow Tree 与原生视图树有什么不同？卡 · setState 后，Fabric 怎样让界面发生变化？

4.1 三种树的责任

React 元素树描述组件希望呈现什么；React Shadow Tree 是渲染器保存界面属性和布局相关数据的 C++ 树；Host View Tree 是宿主平台上的实际视图层级。

它们不是三份完全相同的对象。CounterPanel 是组合组件，不会因此拥有一个同名原生控件。View 等宿主组件与 Shadow 节点关联，而部分只参与布局的节点还可能被扁平化，减少不必要的原生层级。

视图扁平化在保持需要的布局与显示语义的前提下，合并部分不必单独存在的宿主视图。是否可以合并取决于节点属性和平台需求，不能看到一个 JSX View 就断言运行时必有一个独立原生 View。

4.2 Render、Commit 与 Mount

Fabric 将一次界面更新概括为三个阶段：

Render 执行组件逻辑，形成需要的宿主描述与 Shadow 节点。渲染计算可能被重新执行，因此不要在组件函数体中启动无法重复的业务副作用。
Commit 处理布局并确定下一份可挂载的树。Yoga 根据样式与根约束计算位置和尺寸；文本等节点的测量还可能调用平台能力。
Mount 根据前后树计算宿主操作，再在 UI 线程应用视图的创建、属性更新、插入或移除。

这里的阶段用于解释 Fabric 内部数据流，不宜与 React DOM 文档中的每个术语或具体回调时机强行一一对应。应用看到组件函数运行，只能说明发生了计算，不能证明已经产生一张新显示帧。

4.3 不可变树与复用

Fabric 用不可变的 Shadow 树表达某一版界面，更新时形成新版本，并对未改变的部分采用结构共享。这样不同阶段可以持有一致的快照，减少在原对象上边改边读带来的冲突。

结构共享也不等于每次更新都复制整棵树，更不等于完全不做比较。解释成本时，要区分组件执行、节点更新、布局、宿主变更和后续绘制；其中一个数量减少，其他部分不一定同比减少。

5. 布局与平台测量

卡 · React Native 的布局可以完全按浏览器 CSS 推断吗？

5.1 Yoga 与样式

Yoga 是 React Native 使用的布局引擎。它根据父级可用空间和节点属性计算尺寸、位置，实际绘制交给宿主平台。

React Native 的 Flexbox 与浏览器有相似概念，但默认值和支持范围不同。例如默认主轴方向为 column，默认 flexShrink 为 0，样式数值通常表示密度无关的逻辑尺寸；不能按 Web CSS 的默认行为直接推断。

import React from 'react';
import {Text, View} from 'react-native';

export function SplitRow() {
  return (
    <View style={{width: 300, padding: 10, gap: 10, flexDirection: 'row'}}>
      <View style={{width: 40, height: 20}} />
      <View style={{flex: 1, height: 20}}>
        <Text>内容</Text>
      </View>
    </View>
  );
}