如何用单个useEffect同时在组件挂载和依赖变更时触发副作用

完全可以用单个useEffect实现你要的效果，useEffect本身的触发规则就覆盖了你需要的两个场景：

• 组件首次挂载后执行一次
• 依赖数组内任意依赖值变更时重新执行

你只需要把需要监听的netInfo放到同一个useEffect的依赖数组中即可，还能同时解决你现在代码逻辑重复的问题。另外你原有代码中定义的isMounted标记没有配套清理函数，依然会存在过时闭包导致的内存泄露风险，优化后的完整代码如下：

import { useEffect } from 'react';

// 可提前抽离公共请求逻辑，方便后续复用
const fetchUsers = async (isMounted, setUsers) => {
  try {
    const userResponse = await api.get('/users');
    if (isMounted) {
      setUsers(userResponse.data);
    }
  } catch (error) {
    console.log(error);
  }
};

useEffect(() => {
  let isMounted = true;
  fetchUsers(isMounted, setUsers);

  // 补充清理逻辑：组件卸载/副作用重新触发前修改标记，避免状态更新泄露
  return () => {
    isMounted = false;
  };
}, [netInfo]); // 所有需要触发请求的依赖都放到这个数组中即可

如果后续你需要新增其他触发请求的依赖，直接往依赖数组中追加即可，不需要新增额外的useEffect。
注意：如果你的netInfo是引用类型（对象/数组/函数），需要保证它的引用稳定性，必要时可以用useMemo/useCallback包裹，避免出现意外的重复请求。

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