正確示例：React.memo + useMemo

1?? 子組件（只關(guān)心 props） //

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

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

2?? 父組件（用 useMemo 穩(wěn)定引用）

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 返回同一個(gè) style 引用
→ React.memo 判定 props 沒變
→ Item 跳過 render

四、FlatList 的「完整版推薦寫法」

? 工業(yè)級(jí)模板（直接用）

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} />;
}

導(dǎo)致memo無效的錯(cuò)誤的問題
? 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} // ?
/>