面试题：Solid.js 中如何有效管理副作用？

Question

在 Solid.js 响应式编程中，副作用管理十分关键。请阐述你对 Solid.js 中管理副作用的理解，并举例说明如何使用诸如 `createEffect` 或 `onCleanup` 等方法来处理副作用，比如在组件挂载和卸载时执行特定操作。

Answer 1

对Solid.js中管理副作用的理解

在Solid.js响应式编程里，副作用指那些不直接返回值，却会影响外部系统状态的操作，如DOM操作、网络请求、订阅事件等。由于Solid.js采用细粒度响应式，管理副作用可确保这些操作在合适时机执行，避免不必要重复计算，保证程序性能与正确性。比如网络请求只在数据变化且满足特定条件时才重新发起，而非每次数据有微小变动都执行。

使用 createEffect 处理副作用

createEffect 用于创建一个响应式副作用。它会在首次运行时执行传入的回调函数，之后当回调函数中依赖的响应式数据发生变化时，也会重新执行。

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

function MyComponent() {
  const [count, setCount] = createSignal(0);

  createEffect(() => {
    console.log(`Count has changed to: ${count()}`);
  });

  return (
    <div>
      <button onClick={() => setCount(count() + 1)}>Increment</button>
    </div>
  );
}

在上述例子中，createEffect 依赖 count，每次 count 变化，都会在控制台打印新的值。

使用 onCleanup 处理组件卸载时的操作

onCleanup 通常在 createEffect 或组件内部使用，用于注册一个清理函数，在组件卸载或 createEffect 重新执行前被调用。

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

function MyComponent() {
  const [count, setCount] = createSignal(0);

  createEffect(() => {
    const subscription = someEvent.subscribe(() => {
      setCount(count() + 1);
    });

    onCleanup(() => {
      subscription.unsubscribe();
    });
  });

  return (
    <div>
      <p>Count: {count()}</p>
    </div>
  );
}

这里，createEffect 订阅了一个外部事件 someEvent，onCleanup 确保在组件卸载或 createEffect 重新执行时，取消这个订阅，防止内存泄漏。