面试题：Solid.js中信号与副作用函数的基础应用

Question

请阐述Solid.js中信号（Signal）的作用，并举例说明如何创建一个信号。同时，描述副作用函数（Effect）与信号之间的关系，给出一个简单的副作用函数依赖信号的代码示例。

Answer 1

1. Solid.js 中信号（Signal）的作用

信号是 Solid.js 中用于管理状态的核心机制。它能够存储可变的值，并在值发生变化时自动通知依赖于该值的部分进行更新。这使得在构建响应式 UI 时，当数据改变，与之相关的视图部分能及时作出相应改变，极大简化了状态管理和视图更新的流程。

2. 创建信号的示例

在 Solid.js 中，可以使用 createSignal 函数来创建信号。示例代码如下：

import { createSignal } from 'solid-js';

const [count, setCount] = createSignal(0);
// 这里创建了一个初始值为 0 的信号，`count` 用于读取信号的值，`setCount` 用于更新信号的值

3. 副作用函数（Effect）与信号之间的关系

副作用函数（Effect）会自动追踪它所依赖的信号。当这些依赖的信号值发生变化时，副作用函数会自动重新执行。副作用函数主要用于处理那些在状态变化时需要执行的额外操作，比如数据持久化（例如将数据保存到本地存储）、网络请求等，而这些操作并不直接影响视图的呈现。

4. 副作用函数依赖信号的代码示例

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

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

createEffect(() => {
  console.log(`The count has changed to: ${count()}`);
  // 这里的副作用函数依赖 `count` 信号，当 `count` 信号值变化时，此函数会重新执行
});

// 模拟更新信号值
setCount(count() + 1);