嵌套FlatList中复选框触发useEffect异常及渲染优化咨询

我在React Native中处理深度嵌套JSON数据，页面包含多个复选框。现在遇到两个问题：一是每次勾选/取消复选框时，useEffect都会被触发，这不符合预期；二是想了解当前嵌套FlatList的渲染方式是否高效。

1. useEffect触发异常的代码及问题 #

我原本期望仅当嵌套JSON的深层数据修改时触发useEffect，但现在每次操作复选框都会触发它。相关代码：

useEffect(() => {
  console.log("in");
}, [...fetchedData.map((item) => item.orderList.map((item) => item.orders))]);

2. 复选框点击处理函数代码 #

const checkboxHandler = useCallback((orderId, subId, id) => {
  const x = orderId + "-" + subId + "-" + id;
  if (checkedArr.indexOf(x) > -1) {
    let filteredArray = checkedArr.filter((item) => item !== x);
    setcheckedArr(filteredArray);
  } else {
    setcheckedArr([...checkedArr, x]);
  }
}, []);

问题原因及修复方案 #

（1）useEffect触发异常的原因

你在useEffect依赖数组中展开了fetchedData.map(...)的结果，每次组件渲染时，map都会生成新的数组引用。即使fetchedData本身没有变化，这个新数组也会被视为依赖项变更，导致useEffect重复触发。

另外，checkboxHandler的依赖数组为空，但函数内部使用了checkedArr，这会引发闭包问题——函数始终引用初始的checkedArr，后续操作可能出现逻辑错误。

修复步骤：

• 修正useEffect依赖：如果要监听fetchedData的深层变化，直接将fetchedData作为依赖，在useEffect内部做深层比较判断是否执行逻辑；或者使用useDeepCompareEffect（自定义或引入第三方库）实现深层依赖比较：

  // 示例：自定义深层比较逻辑
  useEffect(() => {
    // 可在此处和上一次缓存的fetchedData做深层对比，再决定是否执行后续逻辑
    console.log("in");
  }, [fetchedData]);
  

• 修正checkboxHandler的依赖：使用函数式更新避免依赖checkedArr，这样依赖数组为空也能正常工作：

  const checkboxHandler = useCallback((orderId, subId, id) => {
    const x = `${orderId}-${subId}-${id}`;
    setcheckedArr(prev => {
      return prev.includes(x) 
        ? prev.filter(item => item !== x) 
        : [...prev, x];
    });
  }, []);
  

（2）嵌套FlatList的性能优化建议

嵌套FlatList容易出现性能瓶颈，可通过以下方式优化：

• 给每个FlatList设置keyExtractor，使用唯一且稳定的标识作为key，避免不必要的重渲染。
• 对子FlatList设置maxToRenderPerBatch和windowSize属性，控制每次渲染的条目数量，降低初始渲染压力。
• 如果子列表数据量较小，可替换为ScrollView+View组合；数据量大时，FlatList的复用机制更高效。
• 使用React.memo包裹子列表的Item组件，避免父组件渲染时子组件无意义重渲染。

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