性能优化

这一课你将能做到

1. 正确区分 memo / useMemo / useCallback 的职责，消除不必要的组件重渲染
2. 调优 FlatList 参数，知道什么场景该上 FlashList，让万级列表滚动不掉帧
3. 优化图片加载和 App 启动速度，建立「先测量再优化」的科学方法论

为什么要学

功能做完只是及格线。用户用的不是你的 MacBook Pro，而是三年前充话费送的中端安卓机——列表一卡、图片一白，用户三秒后就划走了。性能优化是区分「能跑的代码」和「能上线的产品」的分水岭，也是技术面试里最高频的区域之一。

但优化最怕的是「盲目动手」。很多人把整棵组件树都包上 memo，结果比较 props 的开销反而超过了重渲染本身；或者还没定位瓶颈就把 FlatList 的参数全调一遍。性能优化的第一课是测量，第二课才是动手。

人话：性能优化的核心就一句话——少做事。能不渲染就不渲染（memo 跳过重渲染），能不重算就不重算（useMemo 缓存计算结果），能让原生做就让原生做（FlashList 回收复用、expo-image 的磁盘缓存、Hermes 预编译）。JS 线程是单线程，它一忙所有交互和动画都得排队。

先建立图像

一个重渲染失控的典型场景，这也是本课所有优化手段的出发点：

父组件 state 变了（比如搜索框打一个字）
  → 父组件重新渲染
    → 所有子组件跟着重新渲染（即使 props 没变）
      → 子组件的列表项全部重画
        → 100 行列表 → 掉帧卡顿

解决思路是在「父变不影响子」的地方加隔断：

父组件 state 变了
  → 父重新渲染
    → 子组件（包了一层 memo）发现 props 没变 → 跳过渲染
      → 只有真正相关的组件重画 → 流畅

另外一张图：列表滚动的内存视角。

FlatList 的「窗口化」策略（默认）：
可视区（1 屏）     ← 活跃渲染
上一屏 + 下一屏   ← 保留但不渲染（windowSize 控制）
更远的行           ← 组件实例销毁，下次滚回来重新创建

FlashList 的「回收复用」策略：
可视区            ← 活跃渲染
已滚出的行         ← 组件实例被复用，只换 props 和数据
                    不销毁、不重新创建 → 内存和帧率双优

跟着做

步骤 1：memo 阻止无效重渲染

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

// 包一层 React.memo：props 不变就不重渲染
const ExpensiveRow = React.memo(({ title }) => {
  console.log('Row 渲染了：', title);
  return <Text style={{ padding: 16 }}>{title}</Text>;
});

export default function App() {
  const [text, setText] = useState('');

  return (
    <View style={{ flex: 1, paddingTop: 60 }}>
      <TextInput
        value={text}
        onChangeText={setText}
        placeholder="打字试试"
        style={{ borderWidth: 1, padding: 12, margin: 16 }}
      />
      <ExpensiveRow title="我不受输入影响" />
    </View>
  );
}

不加 memo，每打一个字控制台都会输出一次「Row 渲染了」；加了 memo，Row 只在 title 变化时才渲染。打开控制台亲眼验证——这是理解 memo 最快的方式。

注意 React.memo 做的是浅比较：props 里的基本值（string/number/boolean）没问题，对象和数组只要引用没变就通过，引用一变就失效——所以内联对象会穿破 memo。

步骤 2：useCallback 固定函数引用

如果 memo 的子组件接收了一个回调函数，而父组件每次渲染都写一个内联函数，函数引用每轮都变，memo 白做：

// 错：每次渲染 handlePress 都是新函数
<ExpensiveRow onPress={() => handlePress(id)} />

// 对：用 useCallback 固定引用
const handlePress = useCallback((id) => {
  navigation.navigate('Detail', { id });
}, [navigation]);

<ExpensiveRow onPress={handlePress} />