即使在使用 useCallback 之后，FlatList 也会在每次视图加载时呈现

Question

我有一个显示在 FlatList 中的对象数组。我有 TextInputs 和一个按钮。来自 TextInputs 的按钮单击值被添加到现有的 FlatList。它工作正常。但是即使在 TextInput 中输入，FlatList 也会多次呈现。我使用useCallback 来控制渲染。但不起作用。请帮忙。

export default function FlatScreenDmo() {
  const [name, setName] = useState("");
  const [rollno, setRollNo] = useState("");
  const [student, setStudent] = useState([
    { rollno: "1", name: "Arun" },
    { rollno: "2", name: "Abin" },
    { rollno: "3", name: "Hari" },
    { rollno: "4", name: "James" },
  ]);

  const DisplayStudentFlatList = useCallback(
    ({ studentData }) => {
      console.log("DisplayStudent");
      return (
        <FlatList
          data={studentData}
          keyExtractor={(item) => item.rollno}
          renderItem={displayStudent}
        />
      );
    },
    [student]
  );

  const displayStudent = useCallback(
    ({ item }) => {
      console.log(item.rollno);
      return (
        <TouchableOpacity style={styles.studentRow}>
          <Text style={styles.studentText}>Name : {item.name}</Text>
          <Text style={styles.studentText}>Roll No : {item.rollno}</Text>
        </TouchableOpacity>
      );
    },
    [student]
  );

  function addStudent() {
    console.log("item.rollno");
    const newStudentList = student.concat({ name: name, rollno: rollno });
    setStudent(newStudentList);
  }

  return (
    <View style={styles.container}>
      <TextInput
        style={styles.inputContainer}
        placeholder="Student Name"
        onChangeText={setName}
      />
      <TextInput
        style={styles.inputContainer}
        placeholder="Student Roll No"
        onChangeText={setRollNo}
      />
      <TouchableOpacity style={styles.button} onPress={addStudent}>
        <Text style={styles.studentText}>ADD STUDENT</Text>
      </TouchableOpacity>

      <DisplayStudentFlatList studentData={student} />
    </View>
  );
}

Answer 1

解决了.. 将 FlatList 设为自定义组件，移除 useCallback() 并在导出时使用 React.memo()。