面试题：Solid.js中组件生命周期的主要阶段及应用场景

1. 组件挂载（Mounting）

阶段描述：组件首次被插入到DOM树中时触发。

适合操作：

数据初始化：在这个阶段可以初始化组件内部的状态。例如在Solid.js中，可以使用createSignal创建信号并初始化其值。

import { createSignal } from 'solid-js';

const MyComponent = () => {
  const [count, setCount] = createSignal(0);
  // 这里的count初始值为0，在组件挂载时完成初始化
  return <div>{count()}</div>;
};

获取外部资源：比如发起网络请求获取数据。可以使用fetch在组件挂载时请求数据。

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

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

2. 组件更新（Updating）

阶段描述：当组件的props或状态发生变化时，组件会重新渲染，进入更新阶段。

适合操作：

副作用处理：如果组件依赖某些外部资源（如订阅事件、定时器等），在更新时可能需要重新配置这些资源。例如，当组件的某个状态变化时，需要更新一个与之相关的DOM样式。

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

const MyComponent = () => {
  const [isActive, setIsActive] = createSignal(false);
  const handleClick = () => setIsActive(!isActive());
  let intervalId;
  onCleanup(() => clearInterval(intervalId));
  if (isActive()) {
    intervalId = setInterval(() => {
      console.log('Interval running because component is active');
    }, 1000);
  }
  return <button onClick={handleClick}>{isActive()? 'Deactivate' : 'Activate'}</button>;
};

3. 组件卸载（Unmounting）

阶段描述：组件从DOM树中移除时触发。

适合操作：

清理副作用：取消订阅事件、清除定时器等。例如，在组件挂载时设置了一个定时器，在组件卸载时需要清除该定时器，以避免内存泄漏。

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

const MyComponent = () => {
  let intervalId;
  onMount(() => {
    intervalId = setInterval(() => {
      console.log('Interval running');
    }, 1000);
  });
  onCleanup(() => clearInterval(intervalId));
  return <div>Component with interval</div>;
};

面试题：Solid.js中组件生命周期的主要阶段及应用场景

知识考点

面试题答案

1. 组件挂载（Mounting）

2. 组件更新（Updating）

3. 组件卸载（Unmounting）