正确示例：React.memo + useMemo

1️⃣ 子组件（只关心 props） //

const Item = React.memo(({title, style, onPress}) => {
  console.log('render item');

  return (
    <Pressable style={style} onPress={onPress}>
      <Text>{title}</Text>
    </Pressable>
  );
});

2️⃣ 父组件（用 useMemo 稳定引用）

function List() {
  const [selectedId, setSelectedId] = useState(null);

  const renderItem = ({item}) => {
    const selected = selectedId === item.id;

    const itemStyle = useMemo(
      () => ({
        backgroundColor: selected ? 'red' : 'white',
        padding: 12,
      }),
      [selected],
    );

    const onPress = useCallback(() => {
      setSelectedId(item.id);
    }, [item.id]);

    return (
      <Item
        title={item.title}
        style={itemStyle}
        onPress={onPress}
      />
    );
  };

  return <FlatList data={data} renderItem={renderItem} />;
}

✅ 用 useMemo

父 render
→ selected 没变
→ useMemo 返回同一个 style 引用
→ React.memo 判定 props 没变
→ Item 跳过 render

四、FlatList 的「完整版推荐写法」

⭐ 工业级模板（直接用）

const Item = React.memo(({item, selected, onPress}) => {
  const style = useMemo(() => ({
    backgroundColor: selected ? 'red' : 'white',
    padding: 12,
  }), [selected]);

  return (
    <Pressable style={style} onPress={onPress}>
      <Text>{item.title}</Text>
    </Pressable>
  );
});

function List({data}) {
  const [selectedId, setSelectedId] = useState(null);

  const onPressItem = useCallback((id) => {
    setSelectedId(id);
  }, []);

  const renderItem = useCallback(
    ({item}) => (
      <Item
        item={item}
        selected={item.id === selectedId}
        onPress={() => onPressItem(item.id)}
      />
    ),
    [selectedId, onPressItem],
  );

  return <FlatList data={data} 
            keyExtractor={item => item.id.toString()} //必须是唯一
            renderItem={renderItem} />;
}

导致memo无效的错误的问题
❌ 1. props 引用每次都变

<Item
  item={item}
  style={{ backgroundColor: 'red' }} // ❌
/>

解释
“你 key 没变，但 props 变了”

❌ 2. renderItem 没 useCallback 必须使用useCallback

const renderItem = ({item}) => (
  <Item item={item} />
);

❌ 3. extraData 乱用

<FlatList
  extraData={list} // ❌
/>