面试题：Qwik组件卸载时资源清理的实现

在Qwik应用中，当组件卸载时，为避免因定时器和DOM元素绑定导致的内存泄漏，可按以下方式处理：

定时器清理

使用useEffect和useCleanup：

在Qwik中，可以使用useEffect来创建定时器。例如，假设我们有一个每秒更新一次组件状态的定时器：

import { component$, useState, useEffect, useCleanup } from '@builder.io/qwik';

export const MyComponent = component$(() => {
  const [count, setCount] = useState(0);
  useEffect(() => {
    const timer = setInterval(() => {
      setCount((prevCount) => prevCount + 1);
    }, 1000);
    // 使用useCleanup来清理定时器
    useCleanup(() => {
      clearInterval(timer);
    });
  }, []);

  return <div>{count}</div>;
});

在上述代码中，useEffect的回调函数中创建了定时器，而useCleanup的回调函数会在组件卸载时被调用，在这个回调函数中使用clearInterval来清除定时器，从而避免内存泄漏。

DOM元素绑定清理

直接操作DOM时：

如果组件直接操作了DOM元素并进行了绑定（例如添加了事件监听器），同样可以在useCleanup中进行清理。假设我们在组件挂载时为document.body添加了一个点击事件监听器：

import { component$, useEffect, useCleanup } from '@builder.io/qwik';

export const MyComponent = component$(() => {
  useEffect(() => {
    const handleClick = () => {
      console.log('Body clicked');
    };
    document.body.addEventListener('click', handleClick);
    useCleanup(() => {
      document.body.removeEventListener('click', handleClick);
    });
  }, []);

  return <div>Component with DOM binding</div>;
});

这里useEffect中添加了事件监听器，useCleanup中移除了事件监听器，确保在组件卸载时相关的DOM绑定被正确清理，防止内存泄漏。

使用第三方库操作DOM时：
- 若使用像@builder.io/qwik - dom等第三方库来操作DOM，这些库通常也提供了相应的卸载清理机制。例如，如果使用qwik - dom的attach函数来绑定事件到DOM元素，库可能会提供一个detach类似的函数来进行清理，同样要在useCleanup中调用这个清理函数。

星途面试题库

面试题：Qwik组件卸载时资源清理的实现

知识考点

面试题答案

定时器清理

DOM元素绑定清理