面试题：Solid.js组件生命周期的关键阶段及应用

onMount阶段

作用：onMount 会在组件渲染到 DOM 后立即执行，用于处理一些需要在组件挂载后执行的操作，比如初始化第三方库、添加事件监听器等，这些操作依赖于组件已经存在于 DOM 中。
实际项目举例：在一个地图应用中，当一个地图组件挂载后，需要初始化地图实例。假设使用 Leaflet 地图库，代码示例如下：

import { createComponent } from 'solid-js';
import L from 'leaflet';

const MapComponent = createComponent(() => {
  const mapRef = createRef();

  onMount(() => {
    const map = L.map(mapRef.current, {
      center: [51.505, -0.09],
      zoom: 13
    });
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: '...'
    }).addTo(map);
  });

  return <div ref={mapRef} style={{ height: '400px' }}></div>;
});

export default MapComponent;

onCleanup阶段

作用：onCleanup 会在组件从 DOM 中移除前执行，用于清理在 onMount 阶段或者组件其他生命周期阶段创建的副作用，比如移除事件监听器、取消定时器、关闭网络连接等，以防止内存泄漏。
实际项目举例：在一个实时数据更新的组件中，使用 setInterval 来定时获取数据。当组件卸载时，需要清除这个定时器，代码示例如下：

import { createComponent, onMount, onCleanup } from'solid-js';

const RealTimeComponent = createComponent(() => {
  let timer;
  onMount(() => {
    timer = setInterval(() => {
      // 模拟获取实时数据操作
      console.log('Fetching real - time data...');
    }, 5000);
  });

  onCleanup(() => {
    clearInterval(timer);
  });

  return <div>Real - Time Data Component</div>;
});

export default RealTimeComponent;

面试题：Solid.js组件生命周期的关键阶段及应用

知识考点

面试题答案

onMount阶段

onCleanup阶段