面试题：Solid.js组件卸载时对资源清理的优化策略

在Solid.js组件中处理外部资源清理以避免内存泄漏和资源浪费，可采取以下策略：

定时器

使用createEffect和onCleanup：
- Solid.js的createEffect可以用于执行副作用操作，例如启动定时器。在createEffect内部创建定时器，然后使用onCleanup函数注册清理逻辑。
- 示例代码如下：
```
import { createEffect, onCleanup } from'solid-js';

const MyComponent = () => {
  createEffect(() => {
    const timer = setInterval(() => {
      console.log('Timer is running');
    }, 1000);
    onCleanup(() => {
      clearInterval(timer);
    });
  });

  return <div>Component with timer</div>;
};
```
- 在这个例子中，createEffect在组件挂载时运行，启动了一个每秒执行一次的定时器。onCleanup函数会在组件卸载时被调用，从而清除定时器，避免内存泄漏。

网络请求

使用fetch和AbortController：
- 当发起网络请求（如使用fetch）时，可以使用AbortController来取消请求。在组件挂载时创建AbortController实例，并在组件卸载时使用它来取消未完成的请求。
- 示例代码如下：
```
import { createEffect, onCleanup } from'solid-js';

const MyComponent = () => {
  createEffect(() => {
    const controller = new AbortController();
    const signal = controller.signal;

    fetch('https://example.com/api/data', { signal })
     .then(response => response.json())
     .then(data => console.log(data));

    onCleanup(() => {
      controller.abort();
    });
  });

  return <div>Component with network request</div>;
};
```
- 这里，createEffect发起一个网络请求，AbortController的signal被传递给fetch。当组件卸载时，onCleanup调用controller.abort()，取消未完成的请求，防止资源浪费。

使用useRequest或类似的自定义Hook（如果适用）：

可以创建自定义Hook来管理网络请求，在Hook内部处理请求的发起和清理逻辑。例如，可以在Hook中使用createEffect和onCleanup来控制请求的生命周期。
示例自定义Hook代码如下：

import { createEffect, onCleanup } from'solid-js';

const useRequest = (url) => {
  let data = null;
  createEffect(() => {
    const controller = new AbortController();
    const signal = controller.signal;

    fetch(url, { signal })
     .then(response => response.json())
     .then(newData => {
        data = newData;
      });

    onCleanup(() => {
      controller.abort();
    });
  });

  return data;
};

const MyComponent = () => {
  const data = useRequest('https://example.com/api/data');
  return <div>{data && <p>{JSON.stringify(data)}</p>}</div>;
};

这个自定义HookuseRequest封装了网络请求的逻辑，在组件中使用它时，请求会在组件挂载时发起，在组件卸载时取消，并且返回请求的数据供组件使用。

面试题：Solid.js组件卸载时对资源清理的优化策略

知识考点

面试题答案

定时器

网络请求