React中如何处理exhaustive-deps：依赖更新时不触发指定函数调用

方法1：拆分触发逻辑（最简洁直观） #

直接通过空依赖的useEffect处理挂载时的调用，按钮点击单独绑定myFunction。即使myFunction依赖count而重新创建，也不会触发useEffect的重复执行，完全满足“仅挂载+点击触发”的需求。

import { useState, useCallback, useEffect } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);
  
  // 保留count作为依赖，确保函数内能拿到最新count值
  const myFunction = useCallback(() => {
    console.log('当前count:', count);
    // 这里写你的业务逻辑，比如fetch请求等
  }, [count]);

  // 仅在组件挂载时执行一次myFunction
  useEffect(() => {
    myFunction();
  }, []); // 空依赖数组，仅挂载阶段执行

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(prev => prev + 1)}>增加Count</button>
      <button onClick={myFunction}>执行myFunction</button>
    </div>
  );
}

方法2：用useRef捕获最新状态（避免函数频繁重建） #

如果不想让myFunction因count更新而频繁重建，可以用useRef存储最新的count值，这样myFunction的依赖数组可以为空，同时能访问到最新的count。

import { useState, useCallback, useEffect, useRef } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);
  const countRef = useRef(count);

  // 同步count到ref，确保ref始终持有最新值
  useEffect(() => {
    countRef.current = count;
  }, [count]);

  const myFunction = useCallback(() => {
    // 通过countRef.current获取最新的count
    console.log('当前count:', countRef.current);
    // 业务逻辑
  }, []); // 依赖为空，函数不会因count更新重建

  useEffect(() => {
    myFunction();
  }, []); // 仅挂载执行

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(prev => prev + 1)}>增加Count</button>
      <button onClick={myFunction}>执行myFunction</button>
    </div>
  );
}

最优选择 #

优先使用方法1，它更符合React的常规写法，代码简洁易懂，不需要额外维护ref状态。只有当myFunction本身非常复杂，频繁重建会带来性能开销时，再考虑方法2。

核心逻辑是：通过空依赖的useEffect严格控制挂载时的单次执行，按钮点击作为主动触发入口，彻底切断count更新与myFunction自动执行的关联，完全满足你的需求。

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