面试题：Solid.js组件生命周期中状态管理的基本方式

Question

在Solid.js组件生命周期内，阐述使用`createSignal`和`createEffect`进行状态管理的基本原理及常见应用场景。举例说明如何通过它们实现一个简单计数器组件的状态更新与副作用处理。

Answer 1

createSignal 基本原理

1. 状态存储：createSignal 创建一个信号，这是一个包含当前值和更新函数的数组。它用于在组件内存储可变状态。例如，const [count, setCount] = createSignal(0); 这里 count 是当前状态值，初始化为 0，setCount 是用于更新 count 的函数。
2. 响应式依赖追踪：Solid.js 会自动追踪依赖于该信号的部分。当信号值改变时，依赖它的部分会自动重新计算或重新渲染。

createSignal 常见应用场景

1. 基本状态管理：用于管理组件内的简单状态，如布尔值（是否显示某个元素）、数字（计数器值）等。例如，管理一个开关按钮的开/关状态。
2. 表单输入：跟踪表单输入的值，如文本框的值。

createEffect 基本原理

1. 副作用执行：createEffect 用于创建一个副作用。它接受一个函数作为参数，该函数会在其依赖的信号值发生变化时自动执行。例如，createEffect(() => console.log(count())); 这里当 count 信号值变化时，会打印最新的 count 值。
2. 依赖收集：Solid.js 会自动收集 createEffect 内部所依赖的信号，只有这些依赖信号变化时，副作用函数才会执行。

createEffect 常见应用场景

1. 数据获取与更新：当组件状态变化时，触发数据的获取或更新操作，比如根据用户选择的不同类别，重新获取对应的列表数据。
2. DOM 操作：在状态变化时执行一些 DOM 相关的副作用，例如滚动到页面特定位置。

简单计数器组件示例

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

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

  // 副作用：当 count 变化时，在控制台打印
  createEffect(() => {
    console.log('Count is:', count());
  });

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

export default Counter;

在上述示例中，createSignal 创建了计数器状态 count 及其更新函数 setCount。createEffect 定义了一个副作用，当 count 变化时，在控制台打印当前 count 值。按钮点击通过 setCount 更新 count，触发副作用执行并重新渲染包含 count 的部分。