面试题：Solid.js 中响应式状态的基本使用

Question

在 Solid.js 项目里，如何创建一个响应式状态变量，并在组件中使用它来动态更新 DOM 元素的文本内容？请举例说明。

Answer 1

在Solid.js中，可以通过createSignal函数来创建响应式状态变量。以下是一个简单的示例：

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

const App = () => {
  // 创建响应式状态变量和更新函数
  const [count, setCount] = createSignal(0);

  return (
    <div>
      {/* 使用响应式状态变量来动态更新DOM元素的文本内容 */}
      <p>Count: {count()}</p> 
      <button onClick={() => setCount(count() + 1)}>Increment</button>
    </div>
  );
};

render(() => <App />, document.getElementById('app'));

在上述代码中：

1. createSignal(0) 创建了一个初始值为0的响应式状态变量count，同时返回一个更新函数setCount。
2. 在<p>Count: {count()}</p> 中，通过count()获取当前状态值，实现DOM元素文本内容的动态更新。
3. 点击按钮时，调用setCount(count() + 1)更新count的值，从而触发视图的重新渲染，更新<p>标签中的文本。