面试题：Solid.js 组件销毁时对外部资源绑定的处理

处理思路

识别绑定操作：明确组件与外部 DOM 元素或第三方库进行的具体绑定操作，例如为 DOM 元素添加事件监听器，初始化地图库实例等。
解绑时机：在组件销毁阶段执行解绑操作，确保不再使用这些绑定。

可能用到的 Solid.js 相关 API

onCleanup：这是 Solid.js 提供的一个函数，用于注册一个清理函数。该清理函数会在组件销毁时自动执行，非常适合用于解绑操作。

实现步骤

引入 onCleanup：在组件文件中，从 solid-js 库中引入 onCleanup。

import { onCleanup } from'solid-js';

进行绑定操作：在组件内部进行与外部 DOM 元素或第三方库的绑定。例如，假设绑定一个 DOM 元素的点击事件：

import { onCleanup } from'solid-js';

const MyComponent = () => {
  const handleClick = () => {
    console.log('Button clicked');
  };
  const button = document.getElementById('my-button');
  if (button) {
    button.addEventListener('click', handleClick);
  }

使用 onCleanup 进行解绑：在组件内部，调用 onCleanup 并传入解绑函数。

import { onCleanup } from'solid-js';

const MyComponent = () => {
  const handleClick = () => {
    console.log('Button clicked');
  };
  const button = document.getElementById('my-button');
  if (button) {
    button.addEventListener('click', handleClick);
  }

  onCleanup(() => {
    if (button) {
      button.removeEventListener('click', handleClick);
    }
  });

  return <div>My Component</div>;
};

对于第三方库（如地图库）的绑定，思路类似。例如初始化地图库实例后，在 onCleanup 中调用地图库提供的销毁或卸载方法来解绑。

import { onCleanup } from'solid-js';
import mapboxgl from'mapbox-gl';

const MapComponent = () => {
  const map = new mapboxgl.Map({
    container:'map-container',
    style:'mapbox://styles/mapbox/streets-v11',
    center: [-74.5, 40],
    zoom: 9
  });

  onCleanup(() => {
    map.remove();
  });

  return <div id="map-container" style={{ width: '100%', height: '400px' }}></div>;
};

星途面试题库

面试题：Solid.js 组件销毁时对外部资源绑定的处理

知识考点

面试题答案

处理思路

可能用到的 Solid.js 相关 API

实现步骤