约 11 分钟7 张卡

React Native 性能诊断

React Native 性能诊断要找出一次交互在哪个阶段等待、执行或占用资源。JS 计算慢、列表填充跟不上、原生绘制昂贵和图片内存增长，可能都表现为“页面卡”，但需要的证据和改法不同。

本文以 React Native 0.76.9、React 18.3.1 为基线。面试和项目复盘的重点是解释测量对象、定位过程与改动代价，不能只罗列 memo、缓存和原生驱动等配置。

1. 面试核心

先记住这几条，再读正文

先用目标发布构建建立基线，再选择能定位问题的分析环境。开发检查、日志、调试器与采样本身都会改变耗时；诊断结果还要回到目标条件验证。卡 · 基线与分析环境
JS 更新、原生布局绘制和最终显示是不同阶段。某条线程空闲或一个 FPS 数字正常，不能证明整个交互没有延迟。卡 · JS 与原生工作
React Profiler 测量 React 子树的渲染成本，不代表原生布局、GPU 或屏幕完成一帧的时间；普通生产构建默认也不开启该分析能力。卡 · 组件更新与 React Profiler
长列表是在内存、填充速度与响应性之间取舍。扩大渲染窗口或批量可能减少空白，也会增加常驻内容或连续 JS 工作。卡 · 窗口、批量与内容复杂度
getItemLayout 的前提是尺寸可靠。偏移要计入分隔线；动态内容或字体变化使尺寸失效时，错误的固定值会影响定位。卡 · 固定尺寸示例
减少重复渲染要保持行为正确。稳定数据和回调可以帮助跳过工作，错误比较函数或遗漏依赖却会保留旧状态。
原生驱动只转移受支持的动画工作。它不让任意 JS 计算离开 JS 线程，也不保证复杂原生界面一定流畅。卡 · 原生驱动的适用范围
内存分析需要同时看 JS、原生与图片等资源。长期增长要追踪持有关系和生命周期；一次峰值不能直接判成泄漏。卡 · 图片与资源生命周期

2. 从现象建立测量条件

卡 · 开发模式很卡，为什么还要检查发布构建？

2.1 基线与分析环境

先固定应用版本、RN 架构、JS 引擎、设备、系统、数据量、缓存状态和操作路径。例如“连续滚动包含 500 条消息的列表，再进入详情返回”，比“多滑几次看是否流畅”更容易比较。

发布构建用于观察目标用户的表现。开发模式会加入额外检查，频繁日志也可能占用 JS 时间。需要分析组件时，可以使用支持 React profiling 的环境；需要原生时间线时，选择平台允许采样的构建，并记录它和发布配置的差异。不能因为普通 release 中没有 Profiler 回调，就断言组件没有重新渲染。

基线和分析环境承担不同工作：前者确认问题及最终改善，后者帮助解释原因。启动、帧、网络与内存的统计范围见移动端性能指标。

2.2 把延迟拆成可观察阶段

点击后很久才出现内容，可以沿着“事件进入 JS—请求或计算—状态更新—React 渲染—原生提交与显示”定位。先确认具体哪个阶段长，再决定查 CPU、网络、组件更新还是平台绘制。

现象	优先观察的证据	不能直接推出的结论
滚动尚可，点击反馈明显迟到	JS 事件和长任务、回调进入时间	原生界面所有阶段都没问题
快速滚动出现空白	列表填充、单项成本、窗口与批量	只要增大窗口就能解决
JS 计算不多但动画仍卡	主线程、布局绘制、合成与资源加载	新架构或 JSI 已失效
多次进出页面后内存持续增加	JS 与原生对象、缓存、订阅和释放路径	所有增长都是 JS 泄漏

3. JS 与原生工作

卡 · JS 线程忙时页面还在滚动，能说明没有性能问题吗？

3.1 线程指标的含义

JS 线程负责大量业务逻辑、React 更新和事件处理。一次耗时的排序、解析或大范围渲染，会延迟同一线程上其他待处理的工作。把它放进 Promise 回调，并不会自动得到一个后台线程；setTimeout 也只是改变开始时机，不能消除任务本身的执行成本。

原生滚动、受支持的原生动画可以在 JS 忙碌时继续部分工作，但新的 JS 处理和内容准备仍可能跟不上。原生视图的创建、布局、绘制与合成也有各自成本。观察两类帧率有助于缩小范围，却不能替代一次交互的完整时间线。

60 Hz 的显示间隔约为 16.67 ms，120 Hz 约为 8.33 ms。这是理解截止时间的参考，不是给每个阶段各发一份同样长的独立预算；队列等待、阶段重叠与显示时机都会影响最终结果。

3.2 新架构仍需要定位具体工作

RN 0.76 默认启用新架构，但实际工程仍应确认构建配置。不能把所有成本都解释成旧 Bridge 的序列化，也不能把 JSI 理解为“调用原生就自动异步”。同步调用中的耗时工作仍可能阻塞调用者。

Fabric、Yoga 和原生视图分别处理不同环节，布局和渲染任务也不能一概绑定到旧架构的固定三条线程。相关执行阶段见 React Native 渲染。性能分析应结合实际调用栈、调度与原生时间线，确认工作在哪里发生。

4. 组件更新与 React Profiler

卡 · React Profiler 的 actualDuration 能当作一帧的完整耗时吗？

React Profiler记录一棵 React 子树的提交和渲染耗时。actualDuration 描述这次更新的 React 渲染成本；baseDuration 是不跳过子树工作时的估计，二者都不是屏幕帧耗时。

下面的探针只保留最近 120 条记录，避免在每次提交时打印大量日志。它需要支持 profiling 的 React 运行环境：

import React, {Profiler} from 'react';

type Sample = {
  phase: string;
  actualDuration: number;
  baseDuration: number;
  commitTime: number;
};
export const samples: Sample[] = [];
export const recordRender: React.ProfilerOnRenderCallback =
  (_id, phase, actualDuration, baseDuration, _startTime, commitTime) => {
    samples.push({phase, actualDuration, baseDuration, commitTime});
    if (samples.length > 120) samples.splice(0, samples.length - 120);
  };

export function MeasuredPanel({children}: {children: React.ReactNode}) {
  return <Profiler id="panel" onRender={recordRender}>{children}</Profiler>;
}

探针能帮助判断一次操作触发了哪些 React 提交，以及渲染成本是否集中在某个子树。它不会测出原生图片解码、视图绘制或 GPU 时间；采样数组只保存短窗口，开始新实验前还应清空，完整采集按需要另行保存。

如果更新范围过大，先检查状态是否放得过高、上下文是否频繁变化，以及列表项是否每次都接到新对象或新回调。memo 默认按各 prop 的 Object.is 结果比较，自己的 state 或读取的 context 改变仍可触发更新。函数缓存和比较条件应服务于已经观察到的重复工作，不能为了“少渲染”忽略会改变显示或行为的属性。缓存比较与闭包的规则见 React 性能优化，其中浏览器布局指标不直接套用于 RN 原生界面。

5. 长列表与尺寸信息

卡 · FlatList 快速滚动出现空白，增大窗口和批量有什么代价？卡 · getItemLayout 为什么要计入分隔线，动态行高能直接使用固定值吗？

5.1 窗口、批量与内容复杂度

列表虚拟化让列表按需维护可见区域附近的内容，避免同时挂载全部项目。它不会自动释放业务层持有的整份数据，也不代表所有项目的状态都永久保存在视图中。

配置	主要影响	调整代价
`initialNumToRender`	首批准备的项目数量	太少可能填不满首屏，太多增加初始工作
`maxToRenderPerBatch`	后续每批渲染数量	增大可能改善填充，也可能延长 JS 连续工作
`updateCellsBatchingPeriod`	后续批次的间隔	太慢可能出现空白，太频繁可能影响响应
`windowSize`	渲染窗口相对可见区域的范围	增大减少部分空白风险，同时增加常驻内容

windowSize 的单位与可见区域有关，不是项目个数。removeClippedSubviews 则把区域外视图从原生层级中分离，不等于释放全部对象；复杂变换和定位还可能出现内容缺失，不能把它当成无条件节省内存的开关。

优化还要检查单项本身：大图、复杂嵌套、昂贵文本或每次渲染的重复计算，可能比调几个窗口参数更值得处理。保留稳定业务 key，数据更新采用能被比较识别的新值；离屏项目的重要状态放到数据或合适的状态容器中。

5.2 固定尺寸示例

下面的列表约定每项高 48、分隔线高 2，因此第 index 项的偏移是 50 * index。这是一个尺寸契约明确的示例，实际产品若需要随字体或多行内容增加高度，就应调整布局策略，不能继续硬套这个偏移。

import React, {memo, useCallback} from 'react';
import {FlatList, Pressable, Text, View} from 'react-native';

type Item = {id: string; title: string};
const ROW_HEIGHT = 48;
const GAP = 2;
const Separator = () => <View style={{height: GAP}} />;
export const getItemLayout = (_data: ArrayLike<Item> | null | undefined,
  index: number) => ({length: ROW_HEIGHT, offset: (ROW_HEIGHT + GAP) * index, index});
const Row = memo(function Row({item, selected, onSelect}: {
  item: Item; selected: boolean; onSelect: (id: string) => void;
}) {
  return <Pressable style={{height: ROW_HEIGHT}} accessibilityRole="button"
    accessibilityState={{selected}} onPress={() => onSelect(item.id)}>
    <Text numberOfLines={1}>{item.title}</Text>
  </Pressable>;
});

export function FixedList({items, selectedId, onSelect}: {
  items: Item[]; selectedId: string | null; onSelect: (id: string) => void;
}) {
  const renderItem = useCallback(({item}: {item: Item}) =>
    <Row item={item} selected={item.id === selectedId} onSelect={onSelect} />,
    [selectedId, onSelect]);
  return <FlatList data={items} renderItem={renderItem}
    extraData={selectedId} keyExtractor={item => item.id}
    getItemLayout={getItemLayout} ItemSeparatorComponent={Separator} />;
}