Solid.js 最新官方文档翻译（8）——Signals 信号

冴羽
248 阅读3分钟

前言

Solid.js，一个比 React 更 react 的框架。每一个使用 React 的同学，你可以不使用，但不应该不了解。

目前 Solid.js 发布了最新的官方文档，但却缺少对应的中文文档。为了帮助大家学习 Solid.js，为爱发电翻译文档。

我同时搭建了 Solid.js 最新的中文文档站点：solid.yayujs.com ，欢迎勘误。

虽说是翻译，但个人并不喜欢严格遵守原文，为了保证中文阅读流畅，会删减部分语句，对难懂的部分也会另做补充解释，希望能给大家带来一个好的中文学习体验。

欢迎围观我的“朋友圈”、加入“低调务实优秀中国好青年”前端社群，分享技术，带你成长。

Signals

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

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

创建一个信号

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

import { createSignal } from "solid-js";

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

注意：

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

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

访问值

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

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

更新值

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

setCount(count() + 1);

console.log(count()); // 输出: 1

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

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

console.log(count()); // 输出: 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>
    );
}

说明：

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

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

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

Solid.js 中文文档

本篇已收录在掘金专栏 《Solid.js 中文文档》，该系列一共 25 篇。下一篇：Solid.js 最新官方文档翻译（9）—— 控制流程（条件渲染、动态渲染、列表渲染）

此外我还写过 JavaScript 系列、TypeScript 系列、React 系列、Next.js 系列、VuePress 博客搭建系列等 14 个系列文章， 全系列文章目录：github.com/mqyqingfeng…

通过文字建立交流本身就是一种缘分，欢迎围观我的“朋友圈”、加入“低调务实优秀中国好青年”前端社群，分享技术，带你成长。

avatar
文章
阅读
粉丝