React按键渲染次数翻倍问题求助：每次按键渲染量激增

问题根源 #

• 你在LayoutMain组件的顶层直接执行document.addEventListener，组件每次渲染（比如list更新触发重渲染）时，都会新增一个keydown事件监听，但旧的监听从未被移除。随着按键操作增加，监听函数会不断累积，每次按键就会触发所有已添加的监听，最终导致触发次数翻倍、甚至指数级增长。
• 同时，你使用setList([<p key={Math.random()}>{e.key}</p>, ...list])时，list是组件渲染时捕获的闭包旧值，直接展开会导致状态更新滞后，进一步放大监听累积的问题。

修复步骤 #

1. 用useEffect包裹监听并添加清理逻辑 #

将监听逻辑放入useEffect，并在组件卸载或依赖变化时移除监听，彻底避免监听累积：

import { useEffect, Fragment } from 'react';

const LayoutMain = ({ list, setList }) => {
  useEffect(() => {
    const handleKeyDown = (e) => {
      e.preventDefault();
      console.log(e.key);
      // 用函数式更新获取最新状态，规避闭包问题
      setList(prevList => [<p key={Date.now()}>{e.key}</p>, ...prevList]);
    };

    document.addEventListener('keydown', handleKeyDown);
    // 清理函数：移除监听，防止内存泄漏与重复触发
    return () => {
      document.removeEventListener('keydown', handleKeyDown);
    };
  }, [setList]); // 仅依赖setList，React保证其引用稳定

  return (
    <Fragment>
      <div className="layout__container">
        <div className='layout-main-key esc'><p>ESC</p></div>
        {/* 其他键盘布局代码 */}
      </div>
    </Fragment>
  );
};

export default LayoutMain;

2. 替换不稳定的key值 #

Math.random()作为key可能出现重复，导致React渲染异常，换成Date.now()或自增计数器更可靠：

// 用自增计数器的示例
const [keyCounter, setKeyCounter] = useState(0);

// 在handleKeyDown内：
setList(prevList => [<p key={keyCounter}>{e.key}</p>, ...prevList]);
setKeyCounter(prev => prev + 1);

3. 修正错误的useEffect用法（针对你提到的尝试无效情况） #

如果你之前使用useEffect时遗漏了清理函数，或错误地将list加入依赖项（导致每次list更新都重新添加监听），都会让问题持续。上面的代码仅依赖setList，能避免不必要的监听重复绑定。

额外优化建议 #

不要直接在state中存储JSX元素，建议只存储按键字符串数组，在PressedDisplay组件中统一渲染：

// App组件修改state
const [keyList, setKeyList] = useState([]);

// LayoutMain中更新状态
setKeyList(prev => [e.key, ...prev]);

// PressedDisplay组件修改
const PressedDisplay = ({ keyList }) => {
  return (
    <div className="output-display">
      {keyList.map((key, index) => <p key={index}>{key}</p>)}
    </div>
  );
};

这种纯数据存储的方式更符合React状态管理的最佳实践，便于维护和调试。

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