面试题：Solid.js中createSignal与createEffect生命周期管理的基础应用

Question

请简述在Solid.js中，createSignal创建的信号与createEffect创建的副作用之间的关系。假设你有一个计数器，使用createSignal创建计数状态，如何通过createEffect在计数发生变化时更新DOM？

Answer 1

1. createSignal 创建的信号与 createEffect 创建的副作用之间的关系

• 信号（createSignal）：
  • createSignal 用于创建一个响应式信号，它返回一个包含两个元素的数组。第一个元素是当前值，第二个元素是用于更新这个值的函数。信号的值发生变化时，会触发依赖它的副作用重新执行。
  • 例如 const [count, setCount] = createSignal(0);，这里 count 是当前计数器的值，setCount 是更新计数器值的函数。
• 副作用（createEffect）：
  • createEffect 用于创建一个副作用函数，该函数会在其依赖的响应式数据（如 createSignal 创建的信号值）发生变化时自动重新执行。副作用函数通常用于处理与外部系统的交互，比如更新 DOM、发起网络请求等。
  • 副作用函数内部会“追踪”它所依赖的信号，一旦这些信号的值改变，副作用函数就会重新运行。

2. 使用 createSignal 创建计数器并通过 createEffect 更新 DOM 的示例

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

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

  createEffect(() => {
    const domElement = document.getElementById('counter');
    if (domElement) {
      domElement.textContent = `Count: ${count()}`;
    }
  });

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

render(App, document.getElementById('root'));

在上述代码中：

• 首先通过 createSignal(0) 创建了一个初始值为 0 的计数器 count 及其更新函数 setCount。
• 然后使用 createEffect 创建了一个副作用，在这个副作用函数中，获取页面上 id 为 counter 的元素，并将其文本内容更新为当前的计数值。由于 count 是响应式信号，当通过 setCount 更新 count 的值时，createEffect 创建的副作用函数会自动重新执行，从而更新 DOM 中显示的计数值。