面试题：Solid.js 组件状态管理下的副作用处理

在 Solid.js 中，可以使用 createEffect 来处理副作用操作。

处理副作用：

createEffect 会在依赖的响应式数据变化时自动执行。
示例代码：

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

const App = () => {
  const [count, setCount] = createSignal(0);

  createEffect(() => {
    // 这里执行副作用操作，比如发送网络请求
    console.log(`Count has changed to: ${count()}`);
  });

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

export default App;

在上述代码中，createEffect 依赖 count 这个响应式信号。当 count 的值发生变化时，createEffect 内的副作用操作（这里是 console.log）会被执行。

避免副作用重复执行：

可以通过控制依赖来避免不必要的重复执行。createEffect 只会在其依赖的响应式数据变化时执行。
例如，如果副作用操作依赖多个响应式数据，但其中某个数据变化时不希望副作用重复执行，可以将该数据排除在 createEffect 的依赖之外。
示例代码：

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

const App = () => {
  const [count, setCount] = createSignal(0);
  const [name, setName] = createSignal('');

  createEffect(() => {
    // 只依赖 count，name 变化时副作用不会重复执行
    console.log(`Count has changed to: ${count()}`);
  });

  return (
    <div>
      <p>Count: {count()}</p>
      <button onClick={() => setCount(count() + 1)}>Increment</button>
      <input type="text" onChange={(e) => setName(e.target.value)} />
    </div>
  );
};

export default App;

在组件卸载时清理副作用：

createEffect 可以返回一个清理函数，这个清理函数会在组件卸载时执行。
例如，在进行网络请求时，如果请求还未完成组件就卸载了，可能需要取消请求。
示例代码（模拟网络请求场景，使用 setTimeout 模拟异步操作）：

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

const App = () => {
  const [count, setCount] = createSignal(0);
  let timer;

  createEffect(() => {
    // 模拟网络请求
    timer = setTimeout(() => {
      console.log(`Count has changed to: ${count()}`);
    }, 1000);

    // 清理函数，在组件卸载时执行
    return () => {
      clearTimeout(timer);
    };
  });

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

export default App;

在上述代码中，createEffect 返回的清理函数会在组件卸载时清除 setTimeout，避免内存泄漏或不必要的操作。

星途面试题库

面试题：Solid.js 组件状态管理下的副作用处理

知识考点

面试题答案