React App freeze function constantly 运行

Question

我的反应应用程序的这个页面包含 createBubbles 函数，它工作正常。问题是当我访问这个页面后转到另一个页面时，整个应用程序冻结。

这是控制台显示的错误，我试过 window.onloand 但没有用。

 function createBubbles(){
    const section = document.querySelector('section');
    const createElement = document.createElement('span');
    var size = Math.random() * 60;

    createElement.style.width = size + 'px';
    createElement.style.height = size + 'px';
    createElement.style.left = Math.random() * innerWidth + 'px';
    window.onload=section.appendChild(createElement);
    setTimeout(() => {
      createElement.remove();
    },4000)
  }
  setInterval(createBubbles,50);

BrowserConsoleErrors

Answer 1

您需要清除组件卸载的时间间隔。

const interval = setInterval(createBubbles,50);

useEffect(() => {
    return () => {
        clearInterval(interval)
    }
}, [])

Answer 2

发生该错误是因为当您通过导航到另一个组件路由卸载该组件时，您的事件循环队列仍然充满要执行的函数，因为 setInterval 仍然处于活动状态，但是 DOM 节点您正在选择附加气泡不再存在。

在 React 中使用 setTimeout、事件监听器、setInterval 等...时，您需要将执行放在 useEffect 中，并且必须确保清除间隔、事件监听器、超时、等等...在卸载时，您可以通过从 useEffect 返回一个执行 clear:
的函数来实现

要直接使用 DOM 节点，不要使用 vanilla JS 选择器，而是使用 ref.

 export default function App() {
   const sectionRef = useRef();
   useEffect(() => {
     function createBubbles() {
     const section = sectionRef.current;
     const createElement = document.createElement('span');
     const size = getRandom(60);
     const innerWidth = window.innerWidth;
     const innerHeight = window.innerHeight;

     createElement.style.backgroundColor = 
     `rgba(${getRandom(255)},${getRandom(255)},${getRandom(255)})`;
     createElement.style.width = size + 'px';
     createElement.style.height = size + 'px';
     createElement.style.left = Math.random() * innerWidth + 'px';
     createElement.style.top = Math.random() * innerHeight + 'px';

     if (section) {
       section.appendChild(createElement);

       setTimeout(() => {
       createElement.remove();
       }, 4000);
       }
     }
     const interval = setInterval(createBubbles, 50);
     return () => clearInterval(interval);
     }, []);
     return <section ref={sectionRef}></section>;
   }

   function getRandom(max) {
     return Math.random() * max;
    }

一个工作示例https://stackblitz.com/edit/react-959lni?file=src%2FApp.js

React App freeze function constantly 运行

React App freeze caused by function constantly running

javascript

node.js

dom-events

reactjs