北京
1. 启动性能优化 1. 代码层面的优化 1.1 延迟加载 (Code Splitting)
不要在
App.tsx就加载所有模块 。对一些“次要页面”、“功能模块”使用 动态 import 。
// App.tsx
import { Suspense, lazy } from 'react';
const Settings = lazy(() => import('./screens/Settings'));
export default function App() {
return (
name="Settings" component={() => ( }> )} /> ); }✅ 避免在冷启动时加载大量无关模块。
1.2 按需注册 Native 模块
React Native 默认会在启动时加载所有 Native 模块。 在 Android/iOS 原生侧，可以按需初始化模块，避免阻塞启动。
Android 示例（懒加载模块）
@Override
public List createViewManagers(ReactApplicationContext reactContext) {
List managers = new ArrayList<>();
if (FeatureFlags.isChatEnabled()) {
managers.add(new ChatViewManager());
}
return managers;
}✅ 避免加载用不到的 Native 组件。
1.3 避免大 JSON / 大数据在启动时加载
如果你在启动时就解析大 JSON，会导致 JS Thread 卡顿。 建议在 Splash 页面延迟加载，或者在 Native 层预处理。
// ❌ 不推荐：App 启动立即解析大数据
const data = require('./large-data.json');
// ✅ 推荐：按需加载
useEffect(() => {
import('./large-data.json').then(module => {
setData(module.default);
});
}, []);Hermes 提升启动性能最明显。
Android:
android/app/build.gradle
project.ext.react = [
enableHermes: true
]iOS: Podfile
use_react_native!(
:hermes_enabled => true
)在 metro.config.js 里使用 splitBundle 或第三方方案拆分基础包 + 业务包，减少主包体积。
// metro.config.js
module.exports = {
transformer: {
getTransformOptions: async () => ({
transform: {
experimentalImportSupport: false,
inlineRequires: true, // ✅ 推荐：加快启动
},
}),
},
};✅ inlineRequires: true 可以延迟加载模块，提升冷启动速度。
2.3 Android 多架构分包
在 app/build.gradle 配置：
splits {
abi {
enable true
reset()
include "armeabi-v7a", "arm64-v8a", "x86", "x86_64"
universalApk false
}
}✅ 减少 APK 体积，降低下载/安装耗时。
3. 原生侧优化 3.1 Android：延迟初始化 SoLoader
@Override
public void onCreate() {
super.onCreate();
// ❌ 默认：阻塞启动
// SoLoader.init(this, false);
// ✅ 推荐：延迟初始化，等用户点击 RN 页面时再初始化
new Handler().post(() -> SoLoader.init(this, false));
}在 AppDelegate.mm 中，避免在 application:didFinishLaunchingWithOptions 里做过多初始化，把非关键逻辑移到异步队列。
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
// ✅ 关键逻辑保留
RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];
// ✅ 非关键逻辑延迟执行
dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_BACKGROUND, 0), ^{
[self initializeAnalytics];
[self preloadData];
});
return YES;
}使用 react-native-bootsplash，避免用户在白屏时感知卡顿。
import RNBootSplash from "react-native-bootsplash";
useEffect(() => {
async function init() {
await loadResources();
RNBootSplash.hide({ fade: true });
}
init();
}, []);在 Native 层预加载关键数据（比如用户 token、配置），在 RN 初始化时直接注入，避免 RN 再次异步请求。
// Android Example
@Override
protected String getJSMainModuleName() {
JSONObject preloadData = new JSONObject();
preloadData.put("token", SharedPref.getToken());
return "index";
}React.memo// 子组件：只在 props 改变时更新
const Item = React.memo(({ title }: { title: string }) => {
console.log('Render Item:', title);
return {title} ;
});
// 父组件
export default function List({ data }: { data: string[] }) {
return data.map((title, i) => );
}✅ 优势：当父组件更新时，如果 title 没有变化，Item 不会重新渲染。
2. 缓存函数与计算结果 使用 useCallback 缓存函数
function UserList({ users }: { users: string[] }) {
const [selected, setSelected] = useState (null);
// ❌ 每次渲染都会创建新函数，导致子组件重渲染
// const handlePress = (user: string) => setSelected(user);
// ✅ useCallback 缓存函数
const handlePress = useCallback((user: string) => {
setSelected(user);
}, []);
return (
data={users} renderItem={({ item }) => ( )} keyExtractor={item => item} /> ); } const UserItem = React.memo(({ user, onPress }: { user: string; onPress: (u: string) => void }) => { console.log('Render User:', user); return ( onPress(user)}> {user} ); });✅ 优势：onPress 引用不会改变，UserItem 不会重复渲染。
使用 useMemo 缓存计算结果
function ExpensiveList({ data }: { data: number[] }) {
// ❌ 每次渲染都要执行复杂计算
// const sorted = data.sort((a, b) => a - b);
// ✅ useMemo 缓存结果
const sorted = useMemo(() => {
console.log('Sorting...');
return [...data].sort((a, b) => a - b);
}, [data]);
return (
{sorted.map(n => (
{n}
))}
);
}✅ 优势：只有 data 变化时才重新计算排序。
3. FlatList 优化 正确设置 keyExtractor
data={messages} renderItem={({ item }) => } keyExtractor={item => item.id.toString()} // ✅ 使用稳定的 key />✅ 避免因为 key 不稳定而导致的整列表重渲染。
使用 getItemLayout 提升滚动性能
如果列表项固定高度，可以提供布局信息，避免运行时测量。
data={users} renderItem={renderItem} keyExtractor={item => item.id} getItemLayout={(data, index) => ({ length: 60, // 每项高度 offset: 60 * index, // 偏移量 index, })} />✅ 优势：提升长列表滚动性能，支持快速跳转定位。
4. 避免嵌套过深 & inline 样式 ❌ 不推荐：每次渲染都新建对象 ✅ 推荐：StyleSheet.create
const styles = StyleSheet.create({
box: {
padding: 10,
backgroundColor: 'red',
},
});✅ 优势：避免每次渲染都创建新对象，提升 diff 效率。
5. 使用 Placeholder / Skeleton UI
避免加载时白屏卡顿。
function SkeletonItem() {
return (
);
}
export default function UserList({ loading, data }: { loading: boolean; data: string[] }) {
if (loading) {
return (
{Array.from({ length: 5 }).map((_, i) => (
))}
);
}
return data.map((name, i) => {name} );
}✅ 优势：让用户在加载时看到平滑过渡，减少卡顿感知。
3. 动画优化 3.1 使用 react-native-reanimated 替代 JS 驱动动画
避免 JS Thread 卡顿导致掉帧。
import Animated, { useSharedValue, withSpring, useAnimatedStyle } from 'react-native-reanimated';
export default function Box() {
const offset = useSharedValue(0);
const// ❌ 不推荐：组件卸载后，定时器还在跑
useEffect(() => {
const id = setInterval(fetchData, 1000);
}, []);
// ✅ 推荐：卸载时清理
useEffect(() => {
const id = setInterval(fetchData, 1000);
return () => clearInterval(id);
}, []);同样的原则适用于 事件订阅、动画、WebSocket。
1.2 使用 AbortController 取消未完成的请求
避免组件卸载后还在处理网络请求。
useEffect(() => {
const controller = new AbortController();
fetch('https://api.example.com/data', { signal: controller.signal })
.then(res => res.json())
.then(setData)
.catch(err => {
if (err.name !== 'AbortError') console.error(err);
});
return () => controller.abort(); // ✅ 组件卸载时取消请求
}, []);import FastImage from 'react-native-fast-image';
✅ 支持磁盘缓存 / 内存缓存，避免重复下载。
2.2 避免加载超大图
服务器端提供多分辨率（xxhdpi, xxxhdpi）资源。
前端按需选择：
source={{ uri: isHighRes ? bigUrl : smallUrl }} WebP/AVIF 替代 PNG/JPEG → 体积减小 30%~70%。
使用
Image.getSize()预先获取尺寸，避免 OOM。
Image.getSize(url, (width, height) => {
console.log(`image size: ${width}x${height}`);
});FlatList 配合 removeClippedSubviews：
data={data} renderItem={renderItem} keyExtractor={item => item.id} removeClippedSubviews={true} // ✅ 移除屏幕外组件 />✅ 节省内存占用，避免同时保留大量元素。
3.2 复用列表 Cell（RecyclerListView）
对于超长列表，可以用 RecyclerListView 替代 FlatList，提高内存利用率。
import { RecyclerListView, DataProvider, LayoutProvider } from 'recyclerlistview';可用 react-native-fs 定期清理不再需要的文件。
import RNFS from 'react-native-fs';
async function clearCache() {
const cacheDir = RNFS.CachesDirectoryPath;
const files = await RNFS.readDir(cacheDir);
for (const file of files) {
await RNFS.unlink(file.path);
}
}使用
content://URI + 流式读取，避免一次性加载到内存。使用
BitmapFactory.Options.inSampleSize缩小大图。
BitmapFactory.Options options = new BitmapFactory.Options();
options.inSampleSize = 4; // 降低分辨率
Bitmap bitmap = BitmapFactory.decodeFile(filePath, options);使用
UIImage imageWithContentsOfFile代替imageNamed，避免缓存过多图片到内存。在
RCTImageLoader层设置maxMemoryCacheSize限制。
Flipper Memory 插件 ：监控 JS/Native 内存使用情况。
Xcode Instruments ：分析 iOS 内存泄漏。
Android Profiler ：查看对象分配 & 内存占用。
接入 Sentry/Datadog/Bugly → 收集内存崩溃/OOM。
合并多次调用为一次调用，特别是高频场景。
// ❌ 不推荐 - 每次 setState 都会触发 Bridge
for (const item of list) {
NativeModules.MyModule.save(item);
}
// ✅ 推荐 - 一次性传递
NativeModules.MyModule.saveAll(list);RN 0.64+ 默认支持 Hermes，启用后 JS 执行更快，内存占用更小。
在 android/app/build.gradle：
project.ext.react = [
enableHermes: true // 打开 Hermes
]iOS 也可以在 Podfile 里启用 Hermes。
✅ 总结（落地方案）
启动优化 ：延迟加载模块，SoLoader 延迟初始化。
渲染优化 ：
memo、useCallback，FlatList 参数调优。动画优化 ：使用 Reanimated，避免 JS Thread 驱动动画。
资源优化 ：FastImage 缓存、清理定时器避免泄漏。
通信优化 ：减少 RN ↔ Native Bridge 次数。
构建优化 ：启用 Hermes，减小包体积 & 提升执行效率。
特别声明：以上内容(如有图片或视频亦包括在内)为自媒体平台“网易号”用户上传并发布，本平台仅提供信息存储服务。
Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.
