如何让单个useEffect在组件重渲染与依赖变更时均执行？

你当前的useEffect仅依赖over状态，所以只有当over变化时才会触发。要让它同时响应props的变更，核心是把effect内部用到的所有props都添加到依赖数组中——React要求依赖数组包含effect中使用的所有外部变量（状态、props），这样任何一个依赖项变化时，effect都会重新执行。

具体实现示例 #

假设你的组件接收userInfo和pageSize两个props，且effect逻辑中用到了它们，代码调整如下：

import { useState, useEffect } from 'react';

function YourComponent({ userInfo, pageSize }) {
  const [over, setOver] = useState(false);

  useEffect(() => {
    // 这里可以安全使用 over、userInfo、pageSize
    // 你的业务逻辑代码
    console.log('触发执行：', over, userInfo, pageSize);
  }, [over, userInfo, pageSize]); // 依赖数组包含状态和用到的props

  // 组件其余渲染逻辑
  return <div>...</div>;
}

注意事项 #

• 不要使用空依赖数组[]：空依赖的useEffect只会在组件首次挂载时执行一次，并不会响应props或后续的状态变更，这和你想要的逻辑完全不符。
• 避免遗漏依赖：可以开启ESLint的react-hooks/exhaustive-deps规则，它会自动检查并提示你补充effect中用到的所有依赖，防止出现逻辑不一致的问题。

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