React useEffect触发过于频繁，如何仅在符合指定条件时执行副作用？

方案1：将播放逻辑与获胜事件绑定（最符合直觉） #

你完全可以不用依赖useEffect处理音效播放，直接在useGame的点击处理逻辑里新增获胜回调即可：

1. 修改useGame内部逻辑，在落子更新棋盘后立刻计算最新胜负状态，判定获胜时触发传入的回调函数

function useGame(onWin) {
  const [board, setBoard] = useState(initialBoard);
  // 你的原有胜负判定逻辑
  const calculateWinner = (currentBoard) => { /* ... */ };

  const handleClick = (position) => {
    // 原有落子逻辑，生成新棋盘
    const newBoard = board.map(/* 落子更新逻辑 */);
    setBoard(newBoard);
    // 用最新棋盘计算胜负
    const newWinner = calculateWinner(newBoard);
    if (newWinner) {
      onWin?.();
    }
  };

  const winner = calculateWinner(board);
  return { handleClick, winner };
}

2. 组件内使用时直接在回调里判断音效开关状态

const [soundIsOn, setSoundIsOn] = useState(true);
const { handleClick } = useGame(() => {
  // 只有获胜瞬间才会触发该回调，和后续音效开关变更完全无关
  if (soundIsOn) {
    playSound(winSound);
  }
});

该方案彻底规避了副作用依赖导致的误触发问题，逻辑链路更清晰，音效只在获胜事件发生的瞬间判断是否播放。

方案2：不修改useGame，优化现有useEffect逻辑 #

如果你不想改动useGame的现有实现，可以用React官方推荐的方式处理依赖问题：

如果你使用React 18+，可以用useEvent #

useEvent封装的函数永远能拿到最新的状态，且引用稳定不会触发副作用更新：

import { useEvent } from 'react';

const [soundIsOn, setSoundIsOn] = useState(true);
// 封装获胜音效播放逻辑，永远取最新的soundIsOn值
const playWinSound = useEvent(() => {
  if (soundIsOn) {
    playSound(winSound);
  }
});

// 依赖只有winner，只有winner变化时才会触发副作用
useEffect(() => {
  if (winner) {
    playWinSound();
  }
}, [winner, playWinSound]);
// 注：useEvent返回的函数引用永远稳定，不会导致副作用额外执行

低版本React可以用ref同步状态 #

你提到的用ref跟踪状态的方案其实是React官方推荐的合法方案，实现非常简洁：

const [soundIsOn, setSoundIsOn] = useState(true);
// 用ref同步soundIsOn的最新值，不需要放到副作用依赖里
const soundIsOnRef = useRef(soundIsOn);
useEffect(() => {
  soundIsOnRef.current = soundIsOn;
}, [soundIsOn]);

// 副作用仅依赖winner，不会被soundIsOn的变更触发
useEffect(() => {
  if (winner && soundIsOnRef.current) {
    playSound(winSound);
  }
}, [winner]);

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