面试题：Solid.js 中组件生命周期相关及自定义Hooks基础应用

Question

在 Solid.js 中，简述组件从创建到销毁可能涉及到的生命周期函数及其执行时机。若要创建一个自定义 Hook 用于追踪某个元素的点击次数，该如何实现？

Answer 1

1. Solid.js 组件生命周期函数及其执行时机

• onMount：
  • 执行时机：在组件第一次渲染到 DOM 后立即执行。常用于需要在组件挂载后执行的初始化操作，比如设置事件监听器、获取 DOM 元素引用等。
• onCleanup：
  • 执行时机：当组件即将从 DOM 中移除时执行。可用于清理在 onMount 中创建的副作用，如移除事件监听器，取消定时器等。
• createEffect：
  • 执行时机：在组件渲染时立即执行，并且每当其依赖项发生变化时重新执行。可以理解为一个响应式的副作用函数，用于处理依赖于响应式数据的操作。

2. 创建追踪元素点击次数的自定义 Hook

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

const useClickCounter = () => {
  const [count, setCount] = createSignal(0);
  const handleClick = () => setCount(count() + 1);

  onMount(() => {
    document.addEventListener('click', handleClick);
  });

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

  return count;
};

export default useClickCounter;

在上述代码中：

• 使用 createSignal 创建了一个信号 count 来追踪点击次数，并通过 setCount 函数更新其值。
• onMount 中添加了一个全局的点击事件监听器，每次点击调用 handleClick 函数来增加点击次数。
• onCleanup 中移除了点击事件监听器，确保在组件销毁时清理副作用，避免内存泄漏。最后返回 count 信号，组件可以通过调用该 Hook 获取点击次数。