面试题：Solid.js组件挂载与初始化：数据绑定问题

Question

在Solid.js中，当一个组件挂载并初始化时，假设你有一个状态变量 `count`，在组件内部通过 `createSignal` 创建，现在需要将这个 `count` 绑定到一个按钮的文本上，点击按钮 `count` 自增1，描述实现此功能的具体步骤以及涉及到的Solid.js核心概念。

Answer 1

1. 核心概念说明：
   • createSignal：Solid.js中用于创建状态变量和更新函数的方法。它返回一个数组，第一个元素是状态值，第二个元素是更新状态的函数。
   • 响应式系统：Solid.js基于函数式响应式编程，当状态变化时，与之相关的视图部分会自动更新。
2. 实现步骤：
   • 创建状态变量：在组件内部使用 createSignal 创建 count 状态变量。例如：

import { createSignal } from'solid-js';

function MyComponent() {
    const [count, setCount] = createSignal(0);
    // 这里初始值设为0，你可以根据需求更改初始值

• 绑定到按钮文本并处理点击事件：在返回的JSX中，将 count()（注意这里要调用状态函数获取当前值）绑定到按钮的文本，并在按钮的 onClick 事件中调用 setCount 来自增 count。

    return (
        <button onClick={() => setCount(count() + 1)}>
            {count()}
        </button>
    );
}

• 完整代码如下：

import { createSignal } from'solid-js';

function MyComponent() {
    const [count, setCount] = createSignal(0);
    return (
        <button onClick={() => setCount(count() + 1)}>
            {count()}
        </button>
    );
}

这样，当组件挂载初始化时，count 状态变量被创建并初始化为0，按钮文本显示 count 的值，每次点击按钮，count 自增1，并且按钮文本会自动更新为新的 count 值。