React Native 性能优化：Hermes、新架构与更多实践
React Native 已经发生了巨大的变化。随着 Hermes JavaScript 引擎成为默认选项，以及新架构（Fabric + JSI）在主流应用中逐步推广，开发者拥有了强大的新工具来构建真正高性能的移动体验。
理解 React Native 线程模型
React Native 运行在三个线程上：
- JS 线程：执行你的 JavaScript 代码
- 主/UI 线程：处理原生 UI 渲染
- 影子线程：使用 Yoga 计算布局
传统的 React Native 通过异步桥接在 JS 和原生之间通信，导致帧率下降和卡顿。新架构用 JSI（JavaScript Interface）取代了桥接，实现了同步的原生调用。
启用并优化 Hermes
Hermes 是专门为 React Native 优化的 JavaScript 引擎。它在构建时将 JavaScript 预编译为字节码，从而减少启动时间和内存占用。
启用 Hermes
在 android/app/build.gradle 中：
project.ext.react = [
enableHermes: true
]
在 ios/Podfile 中：
use_react_native!(
:hermes_enabled => true
)
Hermes 性能特性
Hermes 在启动时间、内存效率和可交互时间（TTI）方面表现出色。来自生产应用的数据显示，与 V8 相比，Hermes 的 TTI 提升了 40-60%。
使用 Hermes 进行性能分析
通过 Flipper 或独立分析器使用 Hermes 分析器：
npx react-native start --experimental-debugger
迁移到新架构
新架构包括：
- Fabric：用于同步 UI 操作的新渲染器
- JSI：无需桥接的直接 JS 到原生绑定
- TurboModules：通过 JSI 实现的懒加载原生模块
- Codegen：类型安全的原生模块接口
逐步迁移
在 Android 中启用新架构：
// android/gradle.properties
newArchEnabled=true
在 iOS 中启用新架构：
cd ios && RCT_NEW_ARCH_ENABLED=1 bundle exec pod install
创建 TurboModule 规范文件 NativeMyModule.ts：
import type { TurboModule } from 'react-native';
import { TurboModuleRegistry } from 'react-native';
export interface Spec extends TurboModule {
multiply(a: number, b: number): Promise<number>;
getDeviceInfo(): Promise<{ model: string; os: string }>;
}
export default TurboModuleRegistry.getEnforcing<Spec>('MyModule');
优化 FlatList 和 VirtualizedList
FlatList 是最常被误用的组件之一。当所有项具有固定高度时，使用 getItemLayout：
const ITEM_HEIGHT = 80;
<FlatList
data={items}
getItemLayout={(data, index) => ({
length: ITEM_HEIGHT,
offset: ITEM_HEIGHT * index,
index,
})}
renderItem={({ item }) => <ItemRow item={item} />}
/>
记忆化 renderItem
const renderItem = useCallback(({ item }) => (
<MemoizedItemRow item={item} />
), []);
const MemoizedItemRow = React.memo(({ item }) => {
return (
<View style={styles.row}>
<Text>{item.title}</Text>
<Text>{item.subtitle}</Text>
</View>
);
}, (prevProps, nextProps) => prevProps.item.id === nextProps.item.id);
关键参数 windowSize 和 maxToRenderPerBatch
<FlatList
windowSize={5}
maxToRenderPerBatch={10}
initialNumToRender={8}
updateCellsBatchingPeriod={50}
removeClippedSubviews={true}
/>
图片优化
使用 react-native-fast-image 实现更好的缓存：
import FastImage from 'react-native-fast-image';
<FastImage
style={styles.image}
source={{
uri: 'https://example.com/image.jpg',
priority: FastImage.priority.normal,
cache: FastImage.cacheControl.immutable,
}}
resizeMode={FastImage.resizeMode.cover}
/>
使用 JSI 的原生模块最佳实践
使用新架构，为性能关键操作编写 JSI 模块：
// ios/MyJSIModule.cpp
void MyJSIModule::install(jsi::Runtime& runtime) {
auto multiply = jsi::Function::createFromHostFunction(
runtime,
jsi::PropNameID::forAscii(runtime, "multiply"),
2,
[](jsi::Runtime& runtime, const jsi::Value& thisValue,
const jsi::Value* args, size_t count) -> jsi::Value {
double a = args[0].asNumber();
double b = args[1].asNumber();
return jsi::Value(a * b);
}
);
runtime.global().setProperty(runtime, "multiply", std::move(multiply));
}
避免常见性能陷阱
避免在 render 中使用匿名函数：
// 不好 - 每次渲染创建新函数
<TouchableOpacity onPress={() => handlePress(item.id)}>
// 好 - 稳定引用
const handleItemPress = useCallback(() => handlePress(item.id), [item.id]);
<TouchableOpacity onPress={handleItemPress}>
对耗时操作使用 InteractionManager：
import { InteractionManager } from 'react-native';
useEffect(() => {
const task = InteractionManager.runAfterInteractions(() => {
processLargeDataset(data);
});
return () => task.cancel();
}, [data]);
测量性能
使用自定义性能标记：
import { PerformanceObserver, performance } from 'react-native';
performance.mark('render-start');
// 渲染代码
performance.mark('render-end');
performance.measure('render-duration', 'render-start', 'render-end');
const observer = new PerformanceObserver((list) => {
list.getEntries().forEach((entry) => {
console.log(`${entry.name}: ${entry.duration}ms`);
});
});
observer.observe({ entryTypes: ['measure'] });
结论
2026 年的 React Native 性能优化是一门多层次的学科。从采用 Hermes 和新架构开始，获得基础性能提升。通过正确的 FlatList 配置优化列表。通过摇树优化和懒加载最小化包体积。使用 Flipper 尽早并频繁地进行性能分析。这些技术的组合可以让你的 React Native 应用接近原生性能。