为何React琶音器中noteName值会重复渲染？

你遇到的过度渲染、重复触发定时器的问题，核心原因有两个：

1. startContext函数导致useEffect重复执行：
   组件每次渲染时，startContext都会被重新创建为新函数。而你的useEffect依赖数组里包含了startContext，所以每次setNoteName触发组件重渲染后，这个useEffect都会重新执行一遍，再次创建所有定时器，造成重复触发、过度渲染，甚至重复播放音符。

2. 未清理残留定时器：
   当isPlaying切换为false、组件卸载，或者mode切换时，之前创建的定时器没有被清除，会继续执行并触发setNoteName，导致不必要的状态更新和渲染。

1. 用useCallback缓存startContext函数 #

保证组件重渲染时startContext的引用不变，避免触发useEffect重复执行。

2. 在useEffect中添加清理逻辑 #

每次useEffect重新执行或组件卸载时，清除所有未执行的定时器，避免残留定时器继续工作。

修正后的完整代码 #

const modes = {
    'ionian': [0, 2, 4, 5, 7, 9, 11, 12],
    'dorian': [0, 2, 3, 5, 7, 9, 10, 12],
    'phrygian': [0, 1, 3, 5, 7, 8, 10, 12],
    'lydian': [0, 2, 4, 6, 7, 9, 11, 12],
    'mixolydian': [0, 2, 4, 5, 7, 9, 10, 12],
    'aeolian': [0, 2, 3, 5, 7, 8, 10, 12],
    'locrian': [0, 1, 3, 5, 6, 8, 10, 12],
};

const noteNames = ["C", "C#", "D", "D#", "E", "F", "F#", "G", "G#", "A", "A#", "B"];

const ArpeggioPlayer = () => {
  const [mode, setMode] = useState('ionian');
  const [isPlaying, setIsPlaying] = useState(false);
  const [context, setContext] = useState(null);
  const [noteName, setNoteName] = useState('');

  useEffect(() => {
    const AudioContext = window.AudioContext || window.webkitAudioContext;
    setContext(new AudioContext());
  }, []);

  // 用useCallback缓存函数，避免每次渲染创建新引用
  const startContext = useCallback(async () => {
    if (context?.state === 'suspended') {
      await context.resume();
    }
  }, [context]);

  useEffect(() => {
    if (!context || !isPlaying) return;

    startContext();

    const rootNote = 60; // middle C
    const scale = modes[mode];
    const arpeggio = scale.map(i => rootNote + i);
    const timers = [];

    arpeggio.forEach((note, i) => {
      const newNoteName = noteNames[note % 12];
      const timerId = setTimeout(() => {
        setNoteName(newNoteName);
        const oscillator = context.createOscillator();
        oscillator.frequency.value = 440 * Math.pow(2, (note - 69) / 12);
        oscillator.connect(context.destination);
        oscillator.start();
        oscillator.stop(context.currentTime + 0.5);
      }, i * 500);
      timers.push(timerId);
    });

    // 清理函数：清除所有定时器，停止播放后清空音符显示
    return () => {
      timers.forEach(id => clearTimeout(id));
      setNoteName('');
    };
  }, [context, isPlaying, mode, startContext]);
    
  return (
    <div>
      <select value={mode} onChange={e => setMode(e.target.value)}>
        {Object.keys(modes).map(m => (
          <option key={m} value={m}>{m}</option>
        ))}
      </select>
      <button onClick={() => setIsPlaying(!isPlaying)}>
        {isPlaying ? 'Stop' : 'Start'}
      </button>
     <h1>{noteName}</h1>
    </div>
  );
};

export default ArpeggioPlayer;

关键修改说明 #

• useCallback包裹startContext：固定函数引用，仅当context变化时更新，避免useEffect不必要的重复执行。
• 收集并清除定时器：将所有定时器ID存入数组，在useEffect返回的清理函数中统一清除，防止状态变化或卸载后定时器继续运行。
• 停止播放时清空音符：在清理逻辑中调用setNoteName('')，让停止播放后界面不再显示最后一个音符。

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