组件多次挂载
提问于 2020-04-14 00:28:33
因此，我只是尝试在特定的按键上切换React组件的可见性。
这是完美的工作，但似乎每次我使用ctrl+`切换组件可见性，过程变得越来越慢，并且我的应用程序组件中onKey函数的console.log(e)被调用了10,50,100,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>
)
}
回答 1
Stack Overflow用户
发布于 2020-04-14 00:38:46
不要在render函数中使用document.addEventListener，因为每次组件呈现时都会调用该函数，并且每次都会添加一个新的event listner。
相反，在挂载组件时，使用React Hook React.useEffect()仅添加一次事件侦听器：
function App() {
const [compHidden, setCompHidden] = useState(true);
useEffect(() => {
const onKey = (e) => {
console.log(e)
if(e.ctrlKey && e.key === '`') {
setCompHidden(value => !value);
}
}
document.addEventListener('keydown', onKey);
return () => document.removeEventListener('keydown', onKey);
}, [])
return (
<ComponentToHide hidden={compHidden}/>
);
}需要注意的两件事：
useEffect的第二个参数，一个空数组，告诉React只在组件生命周期开始时运行一次该函数。
- 您可以返回一个在卸载组件时运行的清理函数。我们在这里使用它来删除事件侦听器，以修复额外的内存泄漏。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61198916
复制相关文章
点击加载更多
腾讯云开发者
