React Native中useEffect配合RecyclerView的性能优化与依赖合规问题

你的核心问题是把dataProviderState加入依赖数组后，列表滚动触发状态更新，导致useEffect反复执行，进而引发性能卡顿。下面是遵循exhaustive-deps规则的优化方案：

优化步骤 #

• 缓存DataProvider实例：避免每次组件渲染都新建实例，用useMemo固定引用
• 移除对dataProviderState的直接依赖：使用状态更新的函数式写法，无需依赖当前状态即可更新
• 限制useEffect的触发条件：只依赖稳定的引用，避免不必要的重执行
• 清理定时器：防止组件卸载后定时器仍运行引发内存泄漏

优化后的代码 #

import { useMemo, useState, useEffect } from 'react';

// ...组件其他逻辑

// 用useMemo缓存DataProvider实例，整个生命周期只创建一次
const dataProvider = useMemo(() => 
  new DataProvider((r1, r2) => r1 !== r2), 
  []
);

// 初始化状态时直接用缓存的dataProvider，避免重复创建空行实例
const [dataProviderState, setDataProviderState] = useState(() => 
  dataProvider.cloneWithRows([])
);

useEffect(() => {
  let timerId = null;

  const handleFetchContacts = async () => {
    try {
      const fetchedContacts = await fetchContacts();
      setContacts(fetchedContacts);
      // 使用函数式更新，通过prevState获取最新状态，无需依赖dataProviderState
      setDataProviderState(prevState => prevState.cloneWithRows(fetchedContacts));
    } catch (error) {
      logger.error(error);
    }
  };

  const requestPermissionAndFetchContacts = async () => {
    try {
      const permission = await requestPermissionToContacts();
      setPermissions({contacts: permission});

      if (permission) {
        await handleFetchContacts();
      }
    } catch (err) {
      logger.error(err);
      timerId = setTimeout(() => requestPermissionAndFetchContacts(), 2000);
    }
  };

  requestPermissionAndFetchContacts();

  // 清理函数：组件卸载或useEffect重新执行时清除定时器
  return () => {
    if (timerId) clearTimeout(timerId);
  };
// 只依赖稳定的引用：fetchContacts、状态更新器、缓存的dataProvider
}, [fetchContacts, setContacts, setPermissions, dataProvider]);

关键说明 #

1. useMemo缓存DataProvider：确保dataProvider引用固定，不会因为组件渲染反复创建实例，避免不必要的状态变更
2. 函数式更新状态：setDataProviderState(prevState => ...)直接获取最新状态，无需将dataProviderState加入依赖数组，彻底解决滚动触发useEffect的问题
3. 限制依赖范围：useEffect的依赖仅保留那些不会频繁变化的引用，确保只有当必要条件变更时才执行逻辑
4. 定时器清理：避免组件卸载后定时器还在发起权限请求，防止内存泄漏和无效操作

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