redux 这个简单的useEffect()是如何导致内存泄漏的？

dtcbnfnu 于 2023-02-19 发布在其他

关注(0)|答案(2)|浏览(223)

我只在应用中的一个地方使用useEffect（），如下所示：

useEffect(() => {
    document.body.addEventListener('click', bodyClicked);
    return () => {
      document.body.removeEventListener('click', bodyClicked);
    };
  }, [bodyClicked]);

  function bodyClicked() {
    dispatch({type: 'toggleMenuPageOff'});
  }

我收到警告：
错误代码：4061警告：无法对未装入的组件执行React状态更新。这是一个空操作，但它指示应用程序中存在内存泄漏。若要修复，请取消useEffect清理函数中的所有订阅和异步任务。atWEBPACK_DEFAULT_EXPORT（http：//localhost：3000/bundle.js：4146：70）at div
为什么这是一个内存泄漏，我如何正确地编写它来删除警告？

redux

来源：https://stackoverflow.com/questions/71214586/how-is-this-simple-useeffect-causing-a-memory-leak

2条答案

按热度按时间

ehxuflar1#

你正在创建一个无限循环。组件代码中的if函数将在每次重新渲染时重新创建，这意味着它将触发useEffect，因此会被一次又一次地调用...
https://reactjs.org/docs/hooks-reference.html#usecallback

赞(0）回复(0）举报 2023-02-19

yhqotfr82#

useEffect是注册到DOM的，当组件运行完后，它就运行完了，你的组件不再在DOM中，但浏览器仍然在监听click事件，或者换句话说，你试图在组件卸载后执行click操作，这会导致内存泄漏。useEffect里面的任何内容都是副作用，你必须清理代码以消除潜在的后果
在useEffect（）中添加清理代码，这也是一个返回useEffect（）响应函数，它实际上清理了代码的副作用
在您的代码中，您使用了在dependancies数组中单击的body，请将其保留为空

useEffect(()=> {
              function bodyClicked(){
                 window.bodyclicked(.....)}
               return function(){
              window.removeeventlistener("click",bodyClicked)}
            }},[])

赞(0）回复(0）举报 2023-02-19

我来回答

redux 这个简单的useEffect()是如何导致内存泄漏的？

2条答案

相关问题

热门标签

最新问答