自定义Hook返回对象引发组件重复渲染问题的解决方案咨询

你的问题核心是：组件A每次重渲染时，useValue都会返回一个新的对象引用——哪怕Hook内部的value状态没变化，组件B也会因为props引用改变而触发无意义的重渲染。下面是几种实用的解决办法：

方案1：用useMemo缓存返回对象，配合useCallback稳定函数引用 #

先把内部的_setValue用useCallback包裹，确保它的引用在依赖不变时不会更新；再用useMemo缓存整个返回对象，只在依赖项变化时才重新创建。

修改后的useValue代码：

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

export const useValue = (paramValue = undefined, options = undefined) => {
  const [value, setValue] = useState('');
  
  // 用useCallback稳定_setValue的引用，依赖仅为原生的setValue
  const _setValue = useCallback((value, options = undefined) => {
    setValue(value);
    // ...你的其他逻辑
  }, [setValue]);
  
  // 用useMemo缓存返回对象，仅在value或稳定后的_setValue变化时更新
  return useMemo(() => ({
    getValue: () => value,
    setValue: (value, options = undefined) => _setValue(value, options)
  }), [value, _setValue]);
};

这样组件A其他状态变化时，返回的对象引用保持不变，组件B就不会无故重渲染了。

方案2：拆分返回值，单独传递状态和函数（避免传对象） #

如果不需要把方法封装成对象，可以直接从Hook返回独立的状态和函数，用useCallback稳定函数引用后，直接传给组件B：

修改useValue：

import { useState, useCallback } from 'react';

export const useValue = (paramValue = undefined, options = undefined) => {
  const [value, setValue] = useState('');
  
  const setValueWrapper = useCallback((value, options = undefined) => {
    setValue(value);
    // ...你的其他逻辑
  }, [setValue]);
  
  // 返回独立的状态和函数，而非对象
  return {
    value, // 直接返回value，省去getter函数
    setValue: setValueWrapper
  };
};

组件A中使用：

const { value, setValue } = useValue();
// 直接把value和setValue传给组件B
<ComponentB value={value} setValue={setValue} />

同时给组件B加上React.memo优化：

const ComponentB = React.memo(({ value, setValue }) => {
  // 组件B的逻辑
});

因为value是原始值，setValue被useCallback稳定了引用，只有当value变化时，组件B才会重渲染。

方案3：给组件B添加React.memo并自定义比较逻辑 #

如果必须传递整个对象给组件B，可以用React.memo包裹组件B，自定义比较函数忽略对象引用变化，只对比实际关心的内容（比如getValue()的返回值）：

组件B的代码：

const ComponentB = React.memo(({ valueObj }) => {
  // 组件B的逻辑
}, (prevProps, nextProps) => {
  // 自定义比较：只关心getValue的返回值，以及setValue的引用（可选）
  const prevValue = prevProps.valueObj.getValue();
  const nextValue = nextProps.valueObj.getValue();
  return prevValue === nextValue && prevProps.valueObj.setValue === nextProps.valueObj.setValue;
});

注意这种方式需要配合方案1的useCallback和useMemo，否则setValue的引用仍会变化，导致比较函数判定props更新。

内容的提问来源于stack exchange，提问作者Алексей