Javascript 组件多次安装

因此，我只是尝试在特定按键上切换React组件的可见性

这是完美的工作方式，但似乎每次我使用ctrl+`切换组件可见性时，进程都会越来越慢，并且我的应用程序组件中onKey函数的console.log（e）会被调用10,50100、1000次等等

这就是我目前所拥有的

ReactDOM.render(
  <React.StrictMode>
    <Router>
      <App />
    </Router>

  </React.StrictMode>,
  document.getElementById('root')
);

function App() {
  const [compHidden, toggleComp] = useState(true);

  const onKey = (e) => {
    console.log(e)
    if(e.ctrlKey && e.key === '`') {
      toggleComp(!compHidden);
    }
  }

  document.addEventListener('keydown', onKey);

  return (
      <ComponentToHide hidden={compHidden}/>
  );
}

function ComponentToHide(props) {

  return (
    <div style={{display: props.hidden ? 'none' : 'flex'}}>
     <p>Visible</p>
    </div>
  )
}

ReactDOM.render(
,
document.getElementById（'root'））
);
函数App（）{
const[compHidden，toggleComp]=useState（true）；
const onKey=（e）=>{
控制台日志（e）
如果（e.ctrlKey&&e.key==='``）{
切换comp（！compHidden）；
}
}
文件。addEventListener（'keydown'，onKey）；
返回(
);
}
功能组件隐藏（道具）{
返回(
可见的

)
}

不要在渲染函数中使用

document.addEventListener

，因为组件每次渲染时都会调用该函数，并且每次都会添加新的事件Listener

相反，在安装组件时，使用仅添加一次事件列表器：

函数应用程序（）{
const[compHidden，setCompHidden]=useState（true）；
useffect（（）=>{
const onKey=（e）=>{
控制台日志（e）
如果（e.ctrlKey&&e.key==='``）{
setCompHidden（值=>！值）；
}
}
文件。addEventListener（'keydown'，onKey）；
return（）=>document.removeEventListener（'keydown'，onKey）；
}, [])
返回(
);
}

有两点需要注意：

useEffect的第二个参数只是一个空数组，它告诉React只在组件生命周期的开始运行该函数一次

您可以返回在卸载组件时运行的清理函数。我们在这里使用它来删除事件侦听器以修复额外的内存泄漏

---

第一次将其切换为可见状态似乎效果很好，但之后停止工作（无法隐藏它）是否与此警告有关？React Hook useEffect缺少依赖项：compHidden'。包括它或删除依赖项数组。如果在“toggleComp”调用react hooks/depsahh中只需要“compHidden”，那么还可以执行函数更新“toggleComp（c=>…）”，我认为应该更新setState函数以使用回调表单修改其值。我已经完全更新了postWorks中的代码，非常感谢！你能解释一下为什么我们需要做这个改变吗？我也得到了警告：“useEffect”已经定义，但从未使用过未使用的变量，但我不知道为什么