面试题：Solid.js中常用的组件生命周期钩子及使用场景

onMount
- 适用场景：用于初始化数据加载、绑定事件监听等操作。比如，在组件挂载到DOM后，需要从服务器获取初始数据，就可以使用onMount。示例代码如下：

import { onMount } from'solid-js';

const MyComponent = () => {
    onMount(() => {
        // 模拟从服务器获取数据
        fetch('your-api-url')
          .then(response => response.json())
          .then(data => console.log(data));
    });

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

onCleanup
- 适用场景：主要用于清理在onMount中创建的副作用，如取消事件监听、关闭定时器等。例如，在onMount中添加了一个全局的滚动事件监听，在组件卸载时就需要使用onCleanup来移除该监听，防止内存泄漏。示例如下：

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

const MyComponent = () => {
    onMount(() => {
        const handleScroll = () => {
            console.log('Window is scrolling');
        };
        window.addEventListener('scroll', handleScroll);

        onCleanup(() => {
            window.removeEventListener('scroll', handleScroll);
        });
    });

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

onUpdate
- 适用场景：当组件的状态或props发生变化时执行某些操作，例如根据新的props更新DOM样式或重新计算某些值。假设组件有一个接受count prop的情况，当count变化时，需要更新页面上显示的相关内容，就可以使用onUpdate。示例代码：

import { onUpdate } from'solid-js';

const MyComponent = ({ count }) => {
    onUpdate(() => {
        console.log('Count prop has changed to:', count);
        // 可以在这里执行基于新count值的DOM操作等
    });

    return <div>{count}</div>;
};

createEffect
- 适用场景：虽然它不完全等同于传统的生命周期钩子，但它用于响应式地执行副作用操作。每当依赖的响应式数据变化时，createEffect内部的函数就会重新执行。例如，当组件中有多个状态互相依赖，一个状态变化会导致另一个状态需要重新计算时，就可以使用createEffect。示例如下：

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

const MyComponent = () => {
    const [count, setCount] = createSignal(0);
    const [doubleCount, setDoubleCount] = createSignal(0);

    createEffect(() => {
        setDoubleCount(count() * 2);
    });

    return (
        <div>
            <button onClick={() => setCount(count() + 1)}>Increment</button>
            <p>Count: {count()}</p>
            <p>Double Count: {doubleCount()}</p>
        </div>
    );
};

星途面试题库

面试题：Solid.js中常用的组件生命周期钩子及使用场景

知识考点

面试题答案