大家好，我是你们的 RN 老司机。

今天来聊聊 React Native 开发中最头疼的问题——性能优化。在 2026 年初，React Native 已经进入成熟期，新架构（The Architecture，前身为 New Architecture）已成为默认和强制标准，Hermes 引擎也进一步进化。很多老项目如果不优化，卡顿、掉帧、启动慢的问题会越来越明显，用户体验直线下降。

本文基于 React Native 最新版本（0.82+）和社区最佳实践，总结一套实用优化 checklist，帮助你让 App 跑得飞起，接近原生体验！

1. 基础必备：拥抱新架构 + Hermes 引擎

2025 年底的 React Native 0.82 版本是一个里程碑——旧架构彻底移除，新架构成为唯一选择。这意味着：

• Fabric 渲染器：更高效的 UI 更新，Text 渲染速度提升 20%+。
• TurboModules：按需懒加载 Native 模块。
• JSI 接口：JS 和 Native 直接通信，告别旧 Bridge 的序列化瓶颈。

同时，Hermes 引擎仍是默认 JS 引擎，并在 0.82 中引入实验性新版本，进一步降低内存占用、加速冷启动。

优化建议：

• 新项目直接用最新 RN 初始化。
• 老项目尽快迁移（社区库大多已适配）。
• 启用 Hermes：Android/iOS 默认开启，结合 AOT 字节码预编译，启动时间可减 30-50%。

2. 减少不必要渲染：React 的核心优化

RN 最常见卡顿源于过度渲染。

关键技巧：

• 函数组件用 React.memo() 包裹。
• useMemo() 缓存复杂计算，useCallback() 缓存回调函数。
• 避免内联函数/对象（如 onPress={() => {...}}）。
• 类组件用 PureComponent 或手动 shouldComponentUpdate。

这些小改动能减少 50%+ 的重渲染！

3. 列表优化：FlatList 的致命一击

长列表是性能杀手！用好 FlatList 的这些 props：

• keyExtractor：用稳定唯一 ID（别用 index）。
• getItemLayout：固定高度项必备，跳过测量，大幅提升滚动。
• initialNumToRender：10-20。
• windowSize：调小减内存。
• removeClippedSubviews：移除视口外视图。
• 社区推荐：换用 FlashList，性能更猛。

4. 图片与资源优化

大图是内存黑洞。

• 用 react-native-fast-image 支持缓存、优先级加载。
• 压缩图片，用 WebP 格式，适配不同屏幕尺寸。
• 懒加载：结合列表的 viewability 回调。

5. 动画与交互：跑在 Native 线程

别让 JS 线程阻塞！

• 用 Reanimated 3+ + Gesture Handler，动画直接在 UI/Native 线程运行，轻松 60FPS。
• 复杂交互避开 JS 计算。

6. 启动速度与包体积优化

• 代码拆分：动态 import 或 RamBundle。
• 懒加载非首屏组件（React.lazy + Suspense）。
• 启用 ProGuard（Android），移除无用库，压缩资源。

7. 其他进阶优化

• 内存管理：清除定时器、监听器，避免泄漏。
• 状态管理：用 Redux Toolkit + selector，避免全局重渲染。
• 监控工具：Flipper、Systrace、Sentry 性能监控，先定位瓶颈再优化。

性能优化 Checklist

类别	关键优化点	预期收益
架构/引擎	新架构 + Hermes	启动快 30%+，内存低
渲染	memo / useMemo / useCallback	重渲染减 50%+
列表	FlatList 核心 props / FlashList	滚动丝滑，无掉帧
图片	FastImage + 压缩	加载更快，内存优化
动画	Reanimated	稳定 60FPS
启动	代码拆分 + 懒加载	首屏秒开

结语

2026 年的 React Native 已经非常强大，但性能优化永远是开发者必修课。先用工具定位问题（推荐 Flipper Performance），再针对性优化，往往事半功倍。

一、为什么在 React Native 中选择 Zustand 在 RN 工程中，引入状态管理通常会面临几个现实问题： 项目可能是 Hybrid 架构，RN 只是一个子模块 原生工程结构复杂，不希望引

一、Zustand 是什么，适合什么场景

Zustand 是一个轻量级、基于 hooks 的状态管理库，核心特点是：

• 无 Provider（无需 Context 包裹）
• API 极简（create + hooks）
• 按需订阅（避免无关组件重渲染）
• 对 React Native 友好（无额外平台依赖）
• 可渐进式引入

非常适合以下 RN 场景：

• 中小规模应用
• RN Hybrid / Module 化工程
• UI 状态 + 业务状态混合管理
• 替代部分 Redux 的场景

---

二、安装

yarn add zustand
# 或
npm install zustand

React Native 无需额外配置。

---

三、最基础用法（核心必会）

1. 创建 Store

// store/useCounterStore.ts
import { create } from 'zustand';

type CounterState = {
  count: number;
  inc: () => void;
  dec: () => void;
};

export const useCounterStore = create<CounterState>((set) => ({
  count: 0,
  inc: () => set((state) => ({ count: state.count + 1 })),
  dec: () => set((state) => ({ count: state.count - 1 })),
}));

---

2. 在组件中使用

import React from 'react';
import { View, Text, Button } from 'react-native';
import { useCounterStore } from './store/useCounterStore';

export default function Counter() {
  const count = useCounterStore((state) => state.count);
  const inc = useCounterStore((state) => state.inc);

  return (
    <View>
      <Text>Count: {count}</Text>
      <Button title="+" onPress={inc} />
    </View>
  );
}

关键点

• selector 模式：useStore(state => state.xxx)
• 只订阅使用到的字段，避免全量刷新

---

四、推荐的工程化写法（重要）

❌ 不推荐

const store = useStore();

这样会导致任意状态变更都触发重渲染

---

✅ 推荐：拆分 selector

const count = useCounterStore((s) => s.count);
const inc = useCounterStore((s) => s.inc);

或：

const { count, inc } = useCounterStore(
  (s) => ({ count: s.count, inc: s.inc })
);

---

五、Zustand 在 React Native 中的常见模式

1. 全局 UI 状态（Loading / Modal）

type UIState = {
  loading: boolean;
  showLoading: () => void;
  hideLoading: () => void;
};

export const useUIStore = create<UIState>((set) => ({
  loading: false,
  showLoading: () => set({ loading: true }),
  hideLoading: () => set({ loading: false }),
}));

const loading = useUIStore((s) => s.loading);

---

2. 业务状态（登录信息）

type User = {
  id: string;
  name: string;
};

type AuthState = {
  user?: User;
  login: (u: User) => void;
  logout: () => void;
};

export const useAuthStore = create<AuthState>((set) => ({
  user: undefined,
  login: (user) => set({ user }),
  logout: () => set({ user: undefined }),
}));

---

3. 异步 Action（非常自然）

type ListState = {
  list: string[];
  loading: boolean;
  fetchList: () => Promise<void>;
};

export const useListStore = create<ListState>((set) => ({
  list: [],
  loading: false,
  fetchList: async () => {
    set({ loading: true });
    const res = await fetch('https://example.com/list');
    const data = await res.json();
    set({ list: data, loading: false });
  },
}));

RN 中无需 thunk / saga。

---

六、性能优化（RN 场景非常关键）

1. 使用 shallow 避免对象对比

import { shallow } from 'zustand/shallow';

const { count, inc } = useCounterStore(
  (s) => ({ count: s.count, inc: s.inc }),
  shallow
);

---

2. 将高频 UI 状态拆分 Store

store/
 ├── useAuthStore.ts
 ├── useUIStore.ts
 ├── useListStore.ts

避免一个大 Store。

---

七、持久化（AsyncStorage）

RN 常用：zustand + persist

import { create } from 'zustand';
import { persist } from 'zustand/middleware';
import AsyncStorage from '@react-native-async-storage/async-storage';

export const useAuthStore = create(
  persist(
    (set) => ({
      token: '',
      setToken: (token: string) => set({ token }),
      clearToken: () => set({ token: '' }),
    }),
    {
      name: 'auth-storage',
      storage: {
        getItem: AsyncStorage.getItem,
        setItem: AsyncStorage.setItem,
        removeItem: AsyncStorage.removeItem,
      },
    }
  )
);

---

八、Zustand vs Redux Toolkit（RN 实战视角）

维度	Zustand	Redux Toolkit
学习成本	极低	中
样板代码	极少	多
Provider	不需要	必须
异步	原生支持	thunk / saga
DevTools	有	强
大型团队	一般	更适合

个人建议：

• RN 业务页面、模块级状态：Zustand
• 复杂全局状态、多人协作：RTK
• 二者可以共存

---

九、常见坑位总结

1. 不要整 store 订阅
2. 不要把所有状态塞进一个 store
3. RN 中慎用大对象（列表分页要拆分）
4. persist + AsyncStorage 要注意冷启动恢复时机