面试题：Solid.js中createSignal与createEffect的基本使用及区别

Question

请简述Solid.js中createSignal和createEffect各自的作用，并用代码示例展示如何使用它们，同时说明二者在响应式系统设计中的主要区别。

Answer 1

createSignal

1. 作用：在Solid.js中，createSignal用于创建一个响应式的信号。它返回一个数组，包含两个元素，第一个是获取当前值的函数，第二个是更新值的函数。这使得状态能够在应用中以响应式的方式进行管理，任何依赖该信号的部分都会在信号值变化时自动更新。
2. 代码示例：

import { createSignal } from 'solid-js';

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

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

export default App;

createEffect

1. 作用：createEffect用于创建一个响应式副作用。它会在其依赖的信号值发生变化时自动运行传入的回调函数。这个回调函数可以执行诸如数据获取、DOM操作等副作用操作，并且Solid.js会自动追踪依赖，仅在依赖变化时重新运行该副作用。
2. 代码示例：

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

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

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

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

export default App;

主要区别

1. 关注点不同：
   • createSignal主要关注状态的管理，用于创建和更新响应式数据。它提供了一种简洁的方式来定义和修改应用中的状态变量。
   • createEffect主要关注副作用的执行，用于处理那些依赖于响应式数据变化的操作，比如数据获取、日志记录、DOM操作等。
2. 返回值不同：
   • createSignal返回一个包含获取值函数和更新值函数的数组，侧重于状态的读取和修改。
   • createEffect返回一个清理函数（用于在组件卸载或依赖不再满足时清理副作用），侧重于执行副作用操作并管理其生命周期。
3. 触发时机不同：
   • 当createSignal的更新函数被调用，状态值改变时，依赖该信号的视图部分和createEffect中依赖该信号的副作用会被触发更新。
   • createEffect在组件首次渲染时就会执行一次，之后每当其依赖的信号值发生变化时再次执行。