Nanny State：一個(gè)精簡(jiǎn)的Vanilla JS狀態(tài)管理庫(kù)

Nanny State 是一個(gè)微型庫(kù)，旨在簡(jiǎn)化使用原生 JavaScript 構(gòu)建基於狀態(tài)的 Web 應(yīng)用的過(guò)程。它與 React 類似，但開(kāi)銷更小，無(wú)需學(xué)習(xí)新的語(yǔ)法。它使用單個(gè)應(yīng)用程序範(fàn)圍的狀態(tài)對(duì)象，而不是讓每個(gè)組件擁有自己的狀態(tài)。它的靈感來(lái)自 HyperApp，與 Elm 也有許多相似之處。

本文將解釋 Nanny State 的工作原理，並通過(guò)幾個(gè)示例演示其功能。

關(guān)鍵要點(diǎn)：

1. Nanny State 簡(jiǎn)介: Nanny State 是一個(gè)極簡(jiǎn)的庫(kù)，用於使用原生 JavaScript 構(gòu)建基於狀態(tài)的 Web 應(yīng)用程序，設(shè)計(jì)上比 React 更簡(jiǎn)單，開(kāi)銷更小。它使用單個(gè)應(yīng)用程序範(fàn)圍的狀態(tài)對(duì)象，而不是每個(gè)組件的單個(gè)狀態(tài)，其靈感來(lái)自 HyperApp 和 Elm，旨在易於採(cǎi)用，無(wú)需學(xué)習(xí)新的語(yǔ)法。
2. 單向數(shù)據(jù)流模型: 該庫(kù)基於單向數(shù)據(jù)流模型，由三個(gè)核心部分組成：狀態(tài)（一個(gè)保存所有應(yīng)用程序數(shù)據(jù)的對(duì)象）、視圖（一個(gè)根據(jù)當(dāng)前狀態(tài)返回HTML 的函數(shù)）和更新（修改狀態(tài)和重新渲染視圖的唯一方法）。此模型強(qiáng)調(diào)簡(jiǎn)單性，狀態(tài)對(duì)像作為唯一的事實(shí)來(lái)源，確保應(yīng)用程序行為的確定性、一致性和可預(yù)測(cè)性。
3. 實(shí)際示例和可擴(kuò)展性: 通過(guò)實(shí)際示例（包括基本的“Hello Nanny State”應(yīng)用程序和更複雜的真假問(wèn)答遊戲），文章演示了使用Nanny State 構(gòu)建動(dòng)態(tài)、響應(yīng)式Web 應(yīng)用程序的簡(jiǎn)便性和效率。展示了該庫(kù)使用最少代碼創(chuàng)建交互式應(yīng)用程序的潛力，以及擴(kuò)展問(wèn)答遊戲的建議，突出了 Nanny State 的多功能性和對(duì)高級(jí)功能（如本地存儲(chǔ)和路由）的支持。

單向數(shù)據(jù)流

Nanny State 使用單向數(shù)據(jù)流模型，由三個(gè)部分組成：

• 狀態(tài) (State): 一個(gè)存儲(chǔ)所有應(yīng)用程序數(shù)據(jù)的對(duì)象。
• 視圖 (View): 一個(gè)根據(jù)當(dāng)前狀態(tài)返回 HTML 字符串的函數(shù)。
• 更新 (Update): 唯一可以更改狀態(tài)並重新渲染視圖的函數(shù)。

在 Nanny State 中，狀態(tài)就是一切。狀態(tài)對(duì)像是應(yīng)用程序的唯一事實(shí)來(lái)源——應(yīng)用程序的每一部分?jǐn)?shù)據(jù)都是此對(duì)象的屬性。甚至在視圖中使用的事件處理程序也是狀態(tài)對(duì)象的屬性。

視圖是狀態(tài)作為 HTML 的表示。它在狀態(tài)更改時(shí)發(fā)生更改，並允許用戶與應(yīng)用程序交互。

更新函數(shù)是唯一可以更改狀態(tài)的方式。它是更新?tīng)顟B(tài)的單一入口點(diǎn)，並確保更改是確定性、一致且可預(yù)測(cè)的。

構(gòu)建 Nanny State 應(yīng)用程序只需要這三個(gè)部分。事實(shí)上，它可以概括為以下三個(gè)問(wèn)題：

1. 我的應(yīng)用程序需要存儲(chǔ)哪些數(shù)據(jù)？這將構(gòu)成狀態(tài)對(duì)象的屬性。
2. 我希望如何在頁(yè)面上呈現(xiàn)應(yīng)用程序數(shù)據(jù)？這將幫助你創(chuàng)建視圖函數(shù)。
3. 當(dāng)用戶與應(yīng)用程序交互時(shí)，應(yīng)用程序數(shù)據(jù)將如何變化？為此需要更新函數(shù)。

Hello Nanny State!

了解 Nanny State 工作原理最簡(jiǎn)單的方法是編寫一些代碼！我們將從一個(gè)基本示例開(kāi)始，然後嘗試製作一些更複雜的東西。

運(yùn)行以下示例最簡(jiǎn)單的方法是使用在線代碼編輯器（如 CodePen），或者你可以通過(guò)使用 NodeJS 安裝 nanny-state 包來(lái)在本地運(yùn)行它。

將以下代碼複製到 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 的三個(gè)部分如何協(xié)同工作。讓我們分別仔細(xì)看看每個(gè)部分：

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

Nanny State 使用 μhtml 渲染 HTML。視圖函數(shù) 始終 接受狀態(tài)對(duì)像作為其 唯一 參數(shù)。然後，它使用 μhtml 提供的 html 函數(shù)根據(jù)作為參數(shù)提供的模板字面量創(chuàng)建 HTML。

使用模板字面量意味著我們可以使用 ${variable} 符號(hào)將狀態(tài)的屬性插入到視圖中。在這個(gè)例子中，我們使用它將 name 屬性的值插入到 <h1> 元素中。

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

狀態(tài)對(duì)像是存儲(chǔ)所有應(yīng)用程序數(shù)據(jù)的地方。它包含將在視圖中顯示的任何屬性和值，這些屬性和值可能會(huì)在應(yīng)用程序的生命週期中發(fā)生變化，例如此示例中的 name 屬性。

請(qǐng)注意，View 也是使用對(duì)像簡(jiǎn)寫表示法的 State 的屬性。記住 狀態(tài)就是一切——應(yīng)用程序的每個(gè)部分都是狀態(tài)的屬性。

const Update = Nanny(State);

最後一行將更新函數(shù)定義為 Nanny 函數(shù)的返回值。這現(xiàn)在可以用來(lái)更新 State 的任何屬性的值。事實(shí)上，這是更新 State 任何屬性的唯一方法。它還根據(jù) State 中提供的值執(zhí)行 View 的初始渲染。這意味著將顯示一個(gè)標(biāo)題，上面寫著“Hello Nanny State”，如下面的 CodePen 所示：

...(後續(xù)內(nèi)容與原文類似，只是對(duì)語(yǔ)言和表達(dá)方式進(jìn)行了調(diào)整，保持了原文意思不變，並保留了所有圖片及其格式。)

以上是與保姆州的JavaScript中的簡(jiǎn)單狀態(tài)管理的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！