react 函数组件每次状态更新或父组件重渲染时都会重新执行（即函数被“调用”），这是其声明式渲染机制的正常表现，并非 bug；关键在于区分“函数调用”与“真实 dom 更新”。

在你的 Users 组件中，

? 根本原因：React 的重渲染机制

• 函数组件 = 渲染函数：每次状态（如 loading、users、count、pageState、sortState）更新，React 都会重新调用整个函数组件，生成新的虚拟 DOM。
• 你定义了两个 useEffect（分别依赖 pageState 和 sortState），而 fetchTableData() 内部又调用了 setLoading(true)、setUsers(...)、setDisplayTableData(true)、setLoading(false) 等多个 setState。每个 setState 都会触发一次重渲染 —— 这意味着一次用户操作（如排序切换）可能引发 3–5 次 Users() 执行。
• 此外，pageState 和 sortState 本身是对象，若未正确 memoized（例如通过 useMemo 或结构化更新），其引用频繁变化也会导致 useEffect 多次触发，形成连锁重渲染。

✅ 验证与调试建议

可在组件顶部添加日志快速确认：

console.log("[DEBUG] Users component rendered — users.length:", users.length, "count:", count);

你会发现：日志打印次数远多于数据请求次数 —— 这正是“函数被调用” ≠ “接口被重复请求”的体现。

? 正确优化方向（而非阻止调用）

React 不允许、也不应阻止函数组件被调用；应聚焦于避免不必要的副作用和提升渲染效率：

1. 合并 useEffect，避免重复请求
   当前两个 effect 在 pageState 或 sortState 变化时都调用 fetchTableData()，极易造成竞态或重复加载。应合并为一个：

   useEffect(() => {
     if (
       pageState?.limit > 0 &&
       pageState?.skip >= 0 &&
       pageState?.currentPage > 0 &&
       sortState?.headerId &&
       sortState?.orderBy
     ) {
       fetchTableData();
     }
   }, [pageState, sortState]); // 同时监听两者

2. 确保 state 更新原子性，减少中间渲染
   fetchTableData 中连续调用多个 setState 会触发多次渲染。可改用函数式更新或 useReducer 管理批量状态变更；更简单的是：只在数据就绪后统一更新 UI 状态：

   async function fetchTableData() {
     setLoading(true);
     try {
       const [countRes, usersRes] = await Promise.all([
         getCount("users", {}),
         getAllUsers(pageState.limit, pageState.skip, `${sortState.headerId} ${sortState.orderBy}`)
       ]);
       setCount(countRes);
       setUsers(usersRes);
       setDisplayTableData(true);
     } finally {
       setLoading(false);
     }
   }

3. 对 Table 组件做性能优化（可选）
   若 Table 渲染开销大，可用 React.memo 避免其在 props 未变时重渲染：

   // Table.jsx
   export const Table = React.memo(({ headers, data, count, ...props }) => {
     // 渲染逻辑
   });

⚠️ 重要提醒

• ❌ 不要试图“让组件只渲染一次”——这违背 React 响应式原则；
• ✅ 应确保组件是纯函数：相同 props + state → 相同输出，无副作用；
• ✅ 使用 React DevTools 的 Highlight Updates 功能直观观察哪些组件因何重渲染；
• ✅ 对高频更新的状态（如搜索输入），考虑防抖（useDebounce）或 useTransition（React 18+）。

总结：函数被多次调用不是问题，而是 React 正常工作流。关注点应转向——是否发起了多余请求？是否产生了冗余计算？是否可优化子组件渲染？——这才是真正影响性能的关键。