React中如何在柯里化函数中使用useCallback？

你遇到的核心问题是：虽然用useCallback缓存了外层的柯里化函数，但每次调用handleDelete(index)都会返回一个全新的内层函数，导致传给PhotoItem的onDelete props每次都是新引用，React.memo判断props变化后就会触发不必要的重渲染。

下面提供几种可行的解决方案：

方案一：取消柯里化，合并参数传递 #

把原本拆分的index和photoId合并到同一个回调参数里，让handleDelete成为稳定的函数引用，再把必要的参数通过PhotoItem的props传递，由子组件触发时带上参数：

修改MyListPhoto组件 #

const MyListPhoto = () => {
   ...other state...
   // 注意：避免使用JS关键字delete作为变量名
   const { delete: deletePhoto } = useDeletePhoto();

   // 直接定义接收两个参数的回调，用useCallback缓存
   const handleDelete = useCallback((photoId, index) => {
      deletePhoto(photoId, index);
   }, [deletePhoto]); // 依赖deletePhoto，确保它是稳定引用（如果useDeletePhoto内部用useCallback包裹了delete方法）

   return (
     <ul>
        {photos.map((photo, index) => (
           <PhotoItem
              key={photo.id}
              photo={photo}
              index={index}
              onDelete={handleDelete}
           />
        ))}
     </ul>
   )
}

修改PhotoItem组件 #

const PhotoItem = React.memo(({ photo, index, onDelete }) => {
    console.log('re-render');

    return (
      // 触发删除时传入当前photo的id和index
      <button onClick={() => onDelete(photo.id, index)}>删除照片</button>
      {/* 其他组件内容 */}
    )
})

这样handleDelete是稳定的引用，传给每个PhotoItem的onDelete都是同一个函数，只要photo和index没有变化，React.memo就会阻止重渲染。

方案二：用useMemo缓存列表项 #

通过useMemo缓存整个列表的渲染结果，确保只有当photos或稳定的handleDelete变化时，才重新生成列表项，从而让每个onDelete保持稳定：

const MyListPhoto = () => {
   ...other state...
   const { delete: deletePhoto } = useDeletePhoto();

   const handleDelete = useCallback((photoId, index) => {
      deletePhoto(photoId, index);
   }, [deletePhoto]);

   // 用useMemo缓存列表项数组
   const photoItems = useMemo(() => {
      return photos.map((photo, index) => (
         <PhotoItem
            key={photo.id}
            photo={photo}
            onDelete={() => handleDelete(photo.id, index)}
         />
      ));
   }, [photos, handleDelete]); // 仅当photos或handleDelete变化时重新生成

   return <ul>{photoItems}</ul>;
}

这种方式不需要修改PhotoItem，只要photos数组和handleDelete稳定，每个onDelete函数就不会频繁更新，React.memo就能正常工作。

方案三：用useRef缓存每个索引对应的回调函数 #

如果一定要保留柯里化写法，可以用useRef缓存每个index对应的删除函数，仅当依赖的deletePhoto变化时才清空缓存：

const MyListPhoto = () => {
   ...other state...
   const { delete: deletePhoto } = useDeletePhoto();
   // 用ref缓存每个index对应的回调函数
   const handlerCache = useRef({});

   // 当deletePhoto变化时，清空缓存，确保后续生成新的函数
   useEffect(() => {
      handlerCache.current = {};
   }, [deletePhoto]);

   // 获取对应index的稳定回调
   const getDeleteHandler = (index) => {
      if (!handlerCache.current[index]) {
         handlerCache.current[index] = (photoId) => {
            deletePhoto(photoId, index);
         };
      }
      return handlerCache.current[index];
   };

   return (
     <ul>
        {photos.map((photo, index) => (
           <PhotoItem
              key={photo.id}
              photo={photo}
              onDelete={getDeleteHandler(index)}
           />
        ))}
     </ul>
   )
}

这种方式能保留柯里化的调用形式，同时保证每个onDelete的引用稳定。

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