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

Question

请简要阐述Solid.js里createSignal和createEffect的功能，并且举例说明在一个简单的计数器场景中，如何分别使用它们实现计数的显示与副作用操作。

Answer 1

createSignal 功能

createSignal 用于在 Solid.js 中创建响应式状态。它返回一个数组，包含两个元素：第一个是获取当前状态值的函数，第二个是更新状态值的函数。状态的变化会触发依赖于该状态的组件重新渲染。

createEffect 功能

createEffect 用于创建副作用。它接受一个函数作为参数，这个函数会在其依赖的响应式数据发生变化时自动执行。可以用来处理像数据获取、订阅事件、日志记录等不需要返回 JSX 的操作。

计数器场景示例 - 使用 createSignal 实现计数显示

import { createSignal } from 'solid-js';

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

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

在上述代码中，createSignal(0) 创建了一个初始值为 0 的响应式状态 count。count() 用于获取当前计数值，setCount 用于更新计数值。每次点击按钮时，setCount(count() + 1) 会更新 count 的值，进而触发组件重新渲染，显示新的计数值。

计数器场景示例 - 使用 createEffect 实现副作用操作

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

function CounterWithEffect() {
  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>
  );
}

在这个例子中，createEffect 内的函数依赖于 count。每次 count 的值发生变化，createEffect 内的函数就会执行，这里表现为在控制台打印出当前的计数值，实现了一个简单的副作用操作。