Concepts

信号

信号是 Solid 应用程序中管理状态的主要方式。它提供了一种存储和更新值的方法，并且是 Solid 响应式的基础。

信号可用于表示应用程序中的任何类型的状态，例如当前用户、当前页面或当前主题。这可以是任何值，包括字符串和数字等原始值，或对象和数组等复杂值。

创建一个信号

您可以通过调用从 solid-js 导入的 createSignal 函数来创建信号。该函数传入一个初始值，并返回一对函数：一个 getter 函数和一个 setter 函数。

import { createSignal } from "solid-js";

const [count, setCount] = createSignal(0);
//       ^ getter  ^ setter

Info:

使用 [ and ]的语法称为数组解构。

这使您可以从数组中提取值。在 createSignal 上下文中，第一个值是 getter 函数，第二个值是 setter 函数。

访问值

createSignal 返回的 getter 函数用于访问信号的值。您可以不带参数调用此函数来获取信号的当前值：

console.log(count()); // output: 0

更新值

createSignal 返回的 setter 函数用于更新信号的值。该函数接收一个信号新值作为参数：

setCount(count() + 1);

console.log(count()); // output: 1

setter 函数还可以接收一个传递前一个值的函数：

setCount((prevCount) => prevCount + 1);

console.log(count()); // output: 1

响应式

信号是响应式的，这意味着它们会在其值发生变化时自动更新。当在追踪作用域内调用信号时，该信号会将依赖项添加到订阅者列表中。一旦信号的值发生变化，它就会通知其所有依赖项发生变化，以便它们可以重新评估其值并进行相应更新。

function Counter() {
  const [count, setCount] = createSignal(0);
  const increment = () => setCount((prev) => prev + 1);

  return (
    <div>
      <span>Count: {count()}</span> {/* 当 `count` 改变时更新 */}
      <button type="button" onClick={increment}>
        Increment
      </button>
    </div>
  );
}

Info:

追踪作用域可以通过 createEffect 或 createMemo 创建。

这两个函数都会订阅在函数内部访问的信号并建立依赖关系。一旦建立了这种关系，只要信号发生变化，该函数就会收到通知。

要了解如何在应用程序中使用信号的更多内容，请访问我们的状态管理指南。

报告此页面问题