如何在循环中正确使用useCallback？React Hook报错排查

「Rendered fewer hooks than expected」错误原因 #

React的Hook规则明确要求：所有Hook必须在组件的顶层作用域调用，不能放在循环、条件判断、嵌套函数中。你在循环里使用useCallback，会导致每次渲染时Hook的调用次数可能随循环长度变化，破坏了React依赖Hook调用顺序追踪状态的机制，从而触发该错误。

避免Item组件重复渲染的正确方式 #

要让被memo包裹的Item组件避免因回调函数引用变化而重复渲染，需保证传入的回调引用稳定，同时不能在循环内调用Hook：

1. 将useCallback提到组件顶层
   先在组件顶层定义稳定的回调函数，再在循环中传递必要参数：

   import { memo, useCallback } from 'react';
   import { TouchableOpacity, Text } from 'react-native';
   
   // 用memo包裹Item组件，仅在props变化时重渲染
   const Item = memo(({ onPress, itemId, title }) => {
     return (
       <TouchableOpacity onPress={() => onPress(itemId)}>
         <Text>{title}</Text>
       </TouchableOpacity>
     );
   });
   
   const ParentComponent = () => {
     // 顶层定义稳定的回调，依赖项为空则始终保持同一引用
     const handleItemPress = useCallback((itemId) => {
       console.log('点击了item:', itemId);
       // 这里可添加业务逻辑，比如修改状态
     }, []);
   
     const items = [{ id: 1, title: 'Item 1' }, { id: 2, title: 'Item 2' }];
   
     return (
       <>
         {items.map(item => (
           <Item
             key={item.id}
             onPress={handleItemPress}
             itemId={item.id}
             title={item.title}
           />
         ))}
       </>
     );
   };
   

   这里handleItemPress是稳定引用，Item的onPress不会随父组件重渲染而变化，配合memo就能避免不必要的重渲染。

2. 若回调依赖父组件状态
   如果回调需要依赖count这类状态，需将依赖项加入useCallback的依赖数组，同时可通过函数式更新避免不必要的依赖：

   const handleItemPress = useCallback((itemId) => {
     // 函数式更新获取最新count，无需将count加入依赖
     setCount(prevCount => prevCount + 1);
     console.log('点击item:', itemId);
   }, []);
   

useMemo优化的问题解决 #

你遇到的重复循环、无法传参问题，通常是因为useMemo的依赖项设置不当，或传参方式错误：

1. 用useMemo缓存渲染列表 #

将循环生成Item的逻辑放入useMemo，仅当依赖项变化时重新生成列表，避免每次渲染都执行循环：

const ParentComponent = () => {
  const [count, setCount] = useState(0);
  const handleItemPress = useCallback((itemId) => {
    setCount(prev => prev + 1);
  }, []);
  const items = [{ id: 1, title: 'Item 1' }, { id: 2, title: 'Item 2' }];

  // 缓存渲染列表，依赖项为items和handleItemPress
  const renderedItems = useMemo(() => {
    return items.map(item => (
      <Item
        key={item.id}
        onPress={handleItemPress}
        itemId={item.id}
        title={item.title}
      />
    ));
  }, [items, handleItemPress]);

  return (
    <>
      <TouchableOpacity onPress={() => setCount(c => c + 1)}>
        <Text>修改count: {count}</Text>
      </TouchableOpacity>
      {renderedItems}
    </>
  );
};

这样只有当items数组变化或handleItemPress引用变化时，才会重新执行循环生成列表。

2. 解决无法传参问题 #

不要在useMemo的循环中动态创建回调（会导致引用变化），而是像上面的示例一样，将参数作为独立props传给Item组件，由Item内部调用回调时传入参数，既保证回调引用稳定，又能传递所需数据。

内容的提问来源于stack exchange，提问作者Manas R. Makde