React/JS鼠标事件处理器行为不符预期，请求排查原因

我遇到了这样的问题：写了一段React组件代码，给元素绑定了mousedown、mouseup和mousemove事件，预期每触发一次动作只输出一次对应日志，但实际操作mousedown->mousemove->mouseup时，控制台会重复输出两次完整的事件序列，而且这个问题和元素类型无关（示例用了button，换成其他元素也一样）。

示例代码 #

return (
  <div className="App">
    <button
      onMouseDown={(e) => console.log("down")}
      onMouseUp={(e) => console.log("up")}
      onMouseMove={(e) => console.log("move")}
    >
      test
    </button>
  </div>
);
}

export default App;

问题原因 #

1. React开发环境StrictMode的双重执行机制
   在React开发环境中，StrictMode会刻意重复调用组件渲染、副作用函数以及事件绑定逻辑，目的是帮开发者提前发现潜在的bug（比如未清理的副作用）。这就导致内联事件处理函数被绑定了两次，事件触发时自然会执行两次回调，出现重复日志。

2. 组件不必要的重复渲染
   如果该组件的父组件没有做渲染优化，频繁触发重渲染，会导致当前组件反复重新渲染。每次渲染都会重新创建并绑定新的事件处理函数，多个监听同时生效，触发时就会多次执行。

解决办法 #

• 临时关闭StrictMode验证
  如果是开发环境下的StrictMode导致，可以暂时移除根组件外层的<StrictMode>标签，重复操作看看日志是否恢复正常。注意：生产环境下StrictMode不会有这个双重执行的行为，上线前可以加回来。

• 优化事件绑定与组件渲染
  用useCallback包裹事件处理函数，配合React.memo对组件做浅比较优化，避免不必要的重渲染和重复绑定：

import { useCallback, memo } from 'react';

const App = memo(() => {
  const handleMouseDown = useCallback((e) => console.log("down"), []);
  const handleMouseUp = useCallback((e) => console.log("up"), []);
  const handleMouseMove = useCallback((e) => console.log("move"), []);

  return (
    <div className="App">
      <button
        onMouseDown={handleMouseDown}
        onMouseUp={handleMouseUp}
        onMouseMove={handleMouseMove}
      >
        test
      </button>
    </div>
  );
});

export default App;

• 排查父组件渲染逻辑
  检查父组件是否存在不必要的状态更新、props频繁变化的情况，针对性优化父组件的渲染逻辑，减少子组件的重复渲染次数。

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