React Native中FlatList刷新缓慢及ActivityIndicator显示异常问题

一、优化FlatList渲染速度 #

针对FlatList渲染慢的问题，可从以下几个方向优化：

• 设置高效的key提取器：确保每个列表项使用唯一且稳定的key，绝对不要用数组索引作为key，这会导致数据更新时大量组件重渲染。

  <FlatList
    keyExtractor={(item) => item.id.toString()} // 用item的唯一ID作为key
    // 其他属性
  />
  

• 使用纯组件包裹列表项：将列表项组件用React.memo包裹，避免无关的重渲染：

  const NoteItem = React.memo(({ item }) => {
    // 列表项渲染逻辑
    return <View>{/* 内容 */}</View>;
  });
  

• 开启视图回收：显式设置removeClippedSubviews={true}（默认已开启，但部分场景需显式声明），自动回收屏幕外的子视图，减少内存占用：

  <FlatList
    removeClippedSubviews={true}
    // 其他属性
  />
  

• 控制初始渲染数量：通过initialNumToRender设置首次渲染的列表项数量，避免一次性渲染大量数据：

  <FlatList
    initialNumToRender={10} // 根据屏幕高度调整合适数值
    // 其他属性
  />
  

• 避免在renderItem内创建新函数/组件：比如点击事件处理函数，提前用useCallback缓存，防止每次renderItem都生成新引用触发重渲染：

  const handleItemPress = useCallback((item) => {
    // 处理点击逻辑
  }, []);
  
  // 在renderItem中使用
  renderItem={({ item }) => <NoteItem item={item} onPress={() => handleItemPress(item)} />}
  

二、修复ActivityIndicator加载状态异常 #

要实现提交时立即显示加载，直到数据更新并渲染完成后隐藏，按以下步骤调整：

1. 添加加载状态变量：

   const [isLoading, setIsLoading] = useState(false);
   

2. 修改提交函数逻辑：在提交开始时立即设置加载状态，等待接口请求和数据获取完成后再关闭：

   const submitNotes = async () => {
     setIsLoading(true); // 立即显示加载
     try {
       // 等待提交接口完成
       await addNotes(inputText);
       // 等待获取最新数据完成
       await getNotes();
       // 可在此处清空输入框
       setInputText('');
     } catch (err) {
       // 处理接口错误，比如弹出提示
       console.error('提交失败:', err);
     } finally {
       setIsLoading(false); // 无论成功失败都关闭加载
     }
   };
   

3. 渲染加载遮罩：将ActivityIndicator以绝对定位覆盖在页面上，确保加载状态可见且不影响交互：

   return (
     <View style={styles.container}>
       <FlatList /* FlatList属性 */ />
       <TextInput /* 输入框属性 */ />
       {/* 加载遮罩 */}
       {isLoading && (
         <View style={styles.loadingOverlay}>
           <ActivityIndicator size="large" color="#007AFF" />
         </View>
       )}
     </View>
   );
   

4. 添加遮罩样式：

   const styles = StyleSheet.create({
     container: {
       flex: 1,
       position: 'relative',
     },
     loadingOverlay: {
       position: 'absolute',
       top: 0,
       left: 0,
       right: 0,
       bottom: 0,
       backgroundColor: 'rgba(255, 255, 255, 0.8)',
       justifyContent: 'center',
       alignItems: 'center',
       zIndex: 100,
     },
   });
   

注意：确保getNotes()函数返回Promise，这样才能用await等待数据加载完成，保证FlatList有新数据后再关闭加载状态。

内容的提问来源于stack exchange，提问作者Vishali