使用useCallback后FlatList仍在视图加载及输入时频繁重渲染求助

问题核心原因 #

你当前的写法存在几处错误，导致useCallback没有起到预期作用，FlatList出现不必要的重渲染：

• useCallback仅能缓存函数引用，组件要跳过不必要重渲染需要配合React.memo使用，否则父组件因为输入框state更新重渲染时，子组件依然会执行渲染逻辑
• 你把列表相关的渲染逻辑全部定义在父组件内部，父组件重渲染时即便有useCallback缓存，也存在依赖处理错误导致缓存失效的问题
• displayStudent的依赖数组错误添加了整个student数组，该函数仅用到参数item，冗余的依赖会导致函数引用不必要更新
• 内联写的keyExtractor每次渲染都会生成新的函数引用，也会触发FlatList重渲染

具体修复方案 #

1. 将FlatList容器组件、列表项渲染逻辑、keyExtractor都抽离到父组件外部，避免父组件重渲染时反复创建
2. 用React.memo包裹FlatList容器组件，仅当传入的数据源studentData变化时才触发重渲染
3. 清理所有冗余的依赖项，保证缓存的函数引用稳定

修改后的完整代码如下：

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

// 抽离到外部的列表项渲染函数，无额外依赖，引用稳定
const displayStudent = ({ 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>
  );
};

// 抽离到外部的keyExtractor，引用稳定
const keyExtractor = (item) => item.rollno;

// 用memo包裹FlatList容器组件，只有props变化时才重渲染
const DisplayStudentFlatList = memo(({ studentData }) => {
  console.log("DisplayStudent");
  return (
    <FlatList
      data={studentData}
      keyExtractor={keyExtractor}
      renderItem={displayStudent}
    />
  );
});

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 addStudent = useCallback(() => {
    setStudent(prev => prev.concat({ name, rollno }));
    // 可选：添加完成后清空输入框
    setName('');
    setRollNo('');
  }, [name, rollno]);

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

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

// 样式可替换为你原有定义，此处仅为避免运行报错补充
const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
  },
  inputContainer: {
    height: 40,
    borderColor: 'gray',
    borderWidth: 1,
    marginBottom: 10,
    paddingHorizontal: 10,
  },
  button: {
    backgroundColor: 'blue',
    padding: 10,
    alignItems: 'center',
    marginBottom: 20,
  },
  studentRow: {
    padding: 15,
    borderBottomWidth: 1,
    borderBottomColor: '#eee',
  },
  studentText: {
    color: 'white',
  }
});

效果说明 #

修改后输入框输入内容时，父组件的name/rollno更新，但被memo包裹的DisplayStudentFlatList接收的studentData没有变化，不会触发重渲染；只有点击添加按钮更新student数组时，才会触发FlatList的更新，完全符合预期。

注意：更新数组时不要直接修改原数组（如用push方法），要使用concat/扩展运算符生成新数组，保证memo的浅比较能检测到数据变化。

内容的提问来源于stack exchange，提问作者Arun P S