面试题：Solid.js中组件生命周期函数的执行顺序及常见应用场景

Question

请描述Solid.js组件中各个生命周期函数（如onMount、onCleanup等）的执行顺序，并举例说明在实际项目开发中，这些生命周期函数通常会在哪些场景下使用。

Answer 1

执行顺序

1. onMount：在组件第一次渲染到DOM后立即执行。这是组件挂载阶段的生命周期函数。
2. onCleanup：当组件即将从DOM中移除时执行。例如组件被卸载，或者在动态组件切换时当前组件被替换。

实际场景使用举例

1. onMount
   • 数据获取：在组件首次加载时从API获取数据。

import { createSignal, onMount } from 'solid-js';

function MyComponent() {
  const [data, setData] = createSignal(null);
  onMount(() => {
    fetch('https://example.com/api/data')
      .then(response => response.json())
      .then(result => setData(result));
  });
  return (
    <div>
      {data() && <p>{JSON.stringify(data())}</p>}
    </div>
  );
}

- **初始化第三方库**：如初始化图表库、地图库等。例如初始化Echarts图表。

import { onMount } from 'solid-js';
import echarts from 'echarts';

function ChartComponent() {
  onMount(() => {
    const chart = echarts.init(document.getElementById('chart'));
    const option = {
      // 图表配置项
    };
    chart.setOption(option);
  });
  return <div id="chart" style={{ width: '400px', height: '300px' }}></div>;
}

2. onCleanup
   • 取消订阅或清除定时器：如果在组件挂载时设置了定时器，在组件卸载时需要清除，防止内存泄漏。

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

function TimerComponent() {
  let timer;
  onMount(() => {
    timer = setInterval(() => {
      console.log('Timer is running');
    }, 1000);
  });
  onCleanup(() => {
    clearInterval(timer);
  });
  return <div>Timer component</div>;
}

- **释放资源**：当使用一些需要手动释放资源的第三方库时，在组件卸载时执行清理操作。例如关闭数据库连接（假设在组件内建立了简单的数据库连接模拟）。

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

function DatabaseComponent() {
  let connection;
  onMount(() => {
    // 模拟建立数据库连接
    connection = { isConnected: true }; 
  });
  onCleanup(() => {
    // 模拟关闭数据库连接
    connection.isConnected = false; 
  });
  return <div>Database component</div>;
}