React如何判断重渲染时机？MERN项目useEffect频繁发请求怎么优化

你当前遇到的服务端重复请求问题，核心原因是useEffect没有传入第二个依赖数组参数：没有依赖数组的useEffect会在每次组件渲染完成后都执行，请求成功后调用setFile更新状态又会触发组件重渲染，最终形成「发请求→更新状态→重渲染→再发请求」的无限循环，才会产生大量无效重复请求。

方案1：修复问题后使用定时轮询（最简单，适配小型低实时性需求项目） #

这就是你提到的定时器方案，修复无限循环问题后使用，负载会大幅降低，实现逻辑最简单：

const [file, setFile] = useState([]);

// 封装列表拉取逻辑，方便多处复用
const fetchFiles = () => {
  axios.post("http://127.0.0.1:5050/file/getfilesbycreator",{
    creator: localStorage.getItem('user')
  })
  .then(res => {
    setFile(res.data);
  })
  .catch(err => console.log(err))
}

useEffect(() => {
  // 组件挂载时先拉取一次初始列表
  fetchFiles();
  // 每5秒轮询一次，间隔可根据实时性需求自行调整
  const timer = setInterval(fetchFiles, 5000);
  // 组件卸载时清除定时器，避免内存泄漏和无效请求
  return () => clearInterval(timer);
// 空依赖数组：逻辑仅在组件挂载时执行一次，不会重复触发
}, [])

方案2：按需触发请求（无无效请求，性能更优） #

根据你的业务场景可以选择对应的实现：

• 操作后主动刷新：如果只有当前用户自己可以修改列表，仅在当前用户执行新增/删除/修改操作的成功回调中调用fetchFiles即可，完全不需要定时请求。
• WebSocket主动推送：如果涉及多用户修改同一列表、对实时性要求高，可以在服务端集成WebSocket（MERN栈推荐使用Socket.io快速实现），当有用户更新了目标用户的文件列表时，服务端主动给对应客户端发推送通知，客户端收到通知后再触发fetchFiles拉取最新列表，没有任何多余的无效请求。客户端简单实现参考：

useEffect(() => {
  fetchFiles();
  // 连接WebSocket服务
  const socket = io('http://127.0.0.1:5050');
  // 监听服务端推送的列表更新通知
  socket.on('fileListUpdate', () => {
    fetchFiles();
  })
  // 组件卸载时断开WebSocket连接
  return () => socket.disconnect();
}, [])

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