React Native：为什么 FlatList 在数据更改时完全重新渲染？

Question

感谢您阅读我的问题！几天以来我一直在努力解决这个问题：每次我对底层数据进行更改时，我的 Flatlist 组件都会重新呈现列表中的所有项目。

情况：

• 我有一个渲染项目的 FlatList 组件，其中包含一个 TouchableOpacity 对象来切换该项目的收藏夹状态。
• 如果按下此按钮，我希望只有这个特定项目在我的 FlatList 中更改/重新渲染，而不是所有项目。感觉就像我一通过调用 setListData 更新状态，它就会重新渲染所有内容。
• 我在更复杂的设置中遇到了这个问题，但能够深入探讨这个核心问题。或者这实际上是预期的行为？

代码：

import React, { useState } from "react";
import {
  View,
  Text,
  StyleSheet,
  FlatList,
  TouchableOpacity,
} from "react-native";

const PlanerScreen = () => {
  const [listData, setListData] = useState([
    { id: "1", name: "Banana", isFav: true },
    { id: "2", name: "Apple", isFav: false },
  ]);

  const Item = ({ item, onPressHandler }) => {
    console.log(item.name, " rendered");
    const color = item.isFav ? "red" : "green";
    return (
      <View
        style={{
          flexDirection: "row",
          width: "100%",
          margin: 10,
        }}
      >
        <Text>{item.name}</Text>
        <TouchableOpacity
          style={{ width: 100, height: 50, backgroundColor: color }}
          onPress={onPressHandler}
        />
      </View>
    );
  };

  const favHandler = (id) => {
    setListData(
      listData.map((item) =>
        item.id === id ? { ...item, isFav: !item.isFav } : item
      )
    );
  };

  console.log("FlatList rendered");
  return (
    <View style={{ flex: 1 }}>
      <StatusBar style={selectedTheme === "light" ? "dark" : "light"} />
      <FlatList
        data={listData}
        renderItem={({ item }) => (
          <Item item={item} onPressHandler={() => favHandler(item.id)} />
        )}
        keyExtractor={(item) => item.id}
      />
    </View>
  );
};

export default PlanerScreen;

单击收藏夹切换按钮时的控制台输出：

FlatList rendered
Banana  rendered
Apple  rendered
FlatList rendered
Banana  rendered
Apple  rendered
FlatList rendered
Banana  rendered
Apple  rendered

Answer 1

您可以使用React.memoshouldComponentUpdate ，它是功能组件的替代方案。它告诉React何时根据 prev 和 next props 重新渲染组件。

import React, { useState, useCallback } from "react";
import {
  View,
  Text,
  StyleSheet,
  FlatList,
  TouchableOpacity,
} from "react-native";

const styles = StyleSheet.create({
  container: {
    flex: 1,
  }
})

const keyExtractor = (item) => item.id;

const Item = React.memo(({ item, onPressHandler }) => {
  console.log(item.name, " rendered");
  const color = item.isFav ? "red" : "green";
  return (
    <View
      style={{
        flexDirection: "row",
        width: "100%",
        margin: 10,
      }}
    >
      <Text>{item.name}</Text>
      <TouchableOpacity
        style={{ width: 100, height: 50, backgroundColor: color }}
        onPress={() => onPressHandler(item.id)}
      />
    </View>
  );
}, (prevProps, nextProps) => {
  if (prevProps.item.isFav === nextProps.item.isFav) return true;
  return false;
});

const PlanerScreen = () => {
  const [listData, setListData] = useState([
    { id: "1", name: "Banana", isFav: true },
    { id: "2", name: "Apple", isFav: false },
  ]);

  const favHandler = useCallback((id) => {
    setListData(prevState => {
      return prevState.map((item) =>
          item.id === id ? { ...item, isFav: !item.isFav } : item
        )
      }
    );
  }, []);


  console.log("### FlatList rendered #####");
  return (
    <View style={styles.container}>
      <FlatList
        data={listData}
        renderItem={({ item }) => <Item item={item} onPressHandler={favHandler} />}
        keyExtractor={keyExtractor}
      />
    </View>
  );
};

export default PlanerScreen;