如何仅在参数变化时重新执行React Hook？

当然可以，React提供了专门的机制来控制Hook的执行时机，核心思路是通过依赖数组限定Hook逻辑仅在指定参数变化时触发，类似React.memo通过props浅比较避免组件重渲染的逻辑，但作用在Hook内部。

1. 自定义Hook的场景 #

如果是你自己封装的自定义Hook，直接在内部用useMemo或useEffect的依赖数组来控制逻辑执行：

• 若Hook包含纯计算逻辑，用useMemo包裹计算过程，依赖设为传入的参数，只有参数变化时才重新计算返回值：

  function useFilteredList(list, filterText) {
    // 仅当list或filterText变化时，重新执行过滤逻辑
    return useMemo(() => {
      return list.filter(item => item.includes(filterText));
    }, [list, filterText]);
  }
  

• 若Hook包含副作用逻辑（比如请求数据、订阅事件），用useEffect包裹副作用，依赖数组设为传入参数，参数变化时才触发副作用：

  function useFetchUser(userId) {
    const [userData, setUserData] = useState(null);
  
    useEffect(() => {
      const fetchUser = async () => {
        const res = await fetch(`/api/users/${userId}`);
        const data = await res.json();
        setUserData(data);
      };
      fetchUser();
    }, [userId]); // 仅userId变化时重新发起请求
  
    return userData;
  }
  

2. 组件内使用内置Hook的场景 #

如果是在组件里直接使用内置Hook处理参数相关逻辑，同样用useMemo或useCallback来控制：
比如你需要根据props参数生成一个计算值，仅在参数变化时更新：

function NumberComponent({ baseNum }) {
  // 仅baseNum变化时，重新计算翻倍后的值
  const doubledNum = useMemo(() => baseNum * 2, [baseNum]);
  return <div>翻倍结果：{doubledNum}</div>;
}

注意事项 #

• 依赖数组必须准确列出所有Hook逻辑中用到的外部变量，否则会出现过时闭包问题，导致逻辑使用旧值。建议开启ESLint的react-hooks/exhaustive-deps规则自动检查依赖。
• React.memo是控制组件是否重渲染，而Hook的依赖控制是避免不必要的计算/副作用执行，两者可以配合使用，但作用层面不同。

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