与保姆州的JavaScript中的简单状态管理-js教程-PHP中文网

Simple State Management in JavaScript with Nanny State

Nanny State：一个精简的Vanilla JS状态管理库

Nanny State 是一个微型库，旨在简化使用原生 JavaScript 构建基于状态的 Web 应用的过程。它与 React 类似，但开销更小，无需学习新的语法。它使用单个应用程序范围的状态对象，而不是让每个组件拥有自己的状态。它的灵感来自 HyperApp，与 Elm 也有许多相似之处。

本文将解释 Nanny State 的工作原理，并通过几个示例演示其功能。

关键要点：

Nanny State 简介: Nanny State 是一个极简的库，用于使用原生 JavaScript 构建基于状态的 Web 应用程序，设计上比 React 更简单，开销更小。它使用单个应用程序范围的状态对象，而不是每个组件的单个状态，其灵感来自 HyperApp 和 Elm，旨在易于采用，无需学习新的语法。
单向数据流模型: 该库基于单向数据流模型，由三个核心部分组成：状态（一个保存所有应用程序数据的对象）、视图（一个根据当前状态返回 HTML 的函数）和更新（修改状态和重新渲染视图的唯一方法）。此模型强调简单性，状态对象作为唯一的事实来源，确保应用程序行为的确定性、一致性和可预测性。
实际示例和可扩展性: 通过实际示例（包括基本的“Hello Nanny State”应用程序和更复杂的真假问答游戏），文章演示了使用 Nanny State 构建动态、响应式 Web 应用程序的简便性和效率。展示了该库使用最少代码创建交互式应用程序的潜力，以及扩展问答游戏的建议，突出了 Nanny State 的多功能性和对高级功能（如本地存储和路由）的支持。

单向数据流

Nanny State 使用单向数据流模型，由三个部分组成：

状态 (State): 一个存储所有应用程序数据的对象。
视图 (View): 一个根据当前状态返回 HTML 字符串的函数。
更新 (Update): 唯一可以更改状态并重新渲染视图的函数。

Simple State Management in JavaScript with Nanny State 在 Nanny State 中，状态就是一切。状态对象是应用程序的唯一事实来源——应用程序的每一部分数据都是此对象的属性。甚至在视图中使用的事件处理程序也是状态对象的属性。

视图是状态作为 HTML 的表示。它在状态更改时发生更改，并允许用户与应用程序交互。

更新函数是唯一可以更改状态的方式。它是更新状态的单一入口点，并确保更改是确定性、一致且可预测的。

构建 Nanny State 应用程序只需要这三个部分。事实上，它可以概括为以下三个问题：

我的应用程序需要存储哪些数据？这将构成状态对象的属性。
我希望如何在页面上呈现应用程序数据？这将帮助你创建视图函数。
当用户与应用程序交互时，应用程序数据将如何变化？为此需要更新函数。

Hello Nanny State!

了解 Nanny State 工作原理最简单的方法是编写一些代码！我们将从一个基本示例开始，然后尝试制作一些更复杂的东西。

运行以下示例最简单的方法是使用在线代码编辑器（如 CodePen），或者你可以通过使用 NodeJS 安装 nanny-state 包来在本地运行它。

将以下代码复制到 CodePen 的 JS 部分：

import { Nanny, html } from 'https://cdn.skypack.dev/nanny-state';

const View = state => html`<h1>Hello ${state.name}</h1>`;

const State = {
  name: "Nanny State",
  View
};

const Update = Nanny(State);

登录后复制

这展示了 Nanny State 的三个部分如何协同工作。让我们分别仔细看看每个部分：

const View = state => html`<h1>Hello ${state.name}</h1>`;

登录后复制

Nanny State 使用 µhtml 渲染 HTML。视图函数始终接受状态对象作为其唯一参数。然后，它使用 µhtml 提供的 html 函数根据作为参数提供的模板字面量创建 HTML。

使用模板字面量意味着我们可以使用 ${variable} 符号将状态的属性插入到视图中。在这个例子中，我们使用它将 name 属性的值插入到 <h1> 元素中。

const State = {
  name: "Nanny State",
  View
};

登录后复制

状态对象是存储所有应用程序数据的地方。它包含将在视图中显示的任何属性和值，这些属性和值可能会在应用程序的生命周期中发生变化，例如此示例中的 name 属性。

请注意，View 也是使用对象简写表示法的 State 的属性。记住 状态就是一切——应用程序的每个部分都是状态的属性。

const Update = Nanny(State);

登录后复制

最后一行将更新函数定义为 Nanny 函数的返回值。这现在可以用来更新 State 的任何属性的值。事实上，这是更新 State 任何属性的唯一方法。它还根据 State 中提供的值执行 View 的初始渲染。这意味着将显示一个标题，上面写着“Hello Nanny State”，如下面的 CodePen 所示：

...(后续内容与原文类似，只是对语言和表达方式进行了调整，保持了原文意思不变，并保留了所有图片及其格式。)

以上是与保姆州的JavaScript中的简单状态管理的详细内容。更多信息请关注PHP中文网其他相关文章！