面试题：Solid.js中createSignal与createEffect如何在简单数据绑定场景协同工作

Question

假设你要创建一个简单的计数器应用，使用Solid.js的createSignal来定义计数器的状态，并且通过createEffect来实现当计数器值变化时，在控制台打印新的值。请写出具体的代码实现，并解释createSignal和createEffect在这里是怎样协同工作的。

Answer 1

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

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

  createEffect(() => {
    console.log('新的值:', count());
  });

  return (
    <div>
      <p>计数: {count()}</p>
      <button onClick={() => setCount(count() + 1)}>增加</button>
    </div>
  );
};

export default Counter;

1. createSignal：
   • createSignal 用于在Solid.js中创建响应式状态。在这里，const [count, setCount] = createSignal(0); 创建了一个名为 count 的状态变量，初始值为 0，同时返回一个更新该状态的函数 setCount。
   • 每当 setCount 被调用，比如点击按钮调用 setCount(count() + 1) 时，count 的值就会更新。
2. createEffect：
   • createEffect 用于创建一个副作用函数。在这个例子中，createEffect(() => { console.log('新的值:', count()); }); 会在 count 值发生变化时自动运行。
   • createEffect 内部的函数会捕获 count，当 count 状态改变（通过 setCount 更新），createEffect 中的函数就会重新执行，从而在控制台打印出新的 count 值。这样，createSignal 管理状态变化，createEffect 响应状态变化并执行副作用操作，两者协同工作实现了计数器值变化时在控制台打印新值的功能。