與保姆州的JavaScript中的簡單狀態管理

Nanny State：一個精簡的Vanilla JS狀態管理庫

Nanny State 是一個微型庫，旨在簡化使用原生 JavaScript 構建基於狀態的 Web 應用的過程。它與 React 類似，但開銷更小，無需學習新的語法。它使用單個應用程序範圍的狀態對象，而不是讓每個組件擁有自己的狀態。它的靈感來自 HyperApp，與 Elm 也有許多相似之處。

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

關鍵要點：

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

單向數據流

Nanny State 使用單向數據流模型，由三個部分組成：

• 狀態 (State): 一個存儲所有應用程序數據的對象。
• 視圖 (View): 一個根據當前狀態返回 HTML 字符串的函數。
• 更新 (Update): 唯一可以更改狀態並重新渲染視圖的函數。

在 Nanny State 中，狀態就是一切。狀態對像是應用程序的唯一事實來源——應用程序的每一部分數據都是此對象的屬性。甚至在視圖中使用的事件處理程序也是狀態對象的屬性。

視圖是狀態作為 HTML 的表示。它在狀態更改時發生更改，並允許用戶與應用程序交互。

更新函數是唯一可以更改狀態的方式。它是更新狀態的單一入口點，並確保更改是確定性、一致且可預測的。

構建 Nanny State 應用程序只需要這三個部分。事實上，它可以概括為以下三個問題：

1. 我的應用程序需要存儲哪些數據？這將構成狀態對象的屬性。
2. 我希望如何在頁面上呈現應用程序數據？這將幫助你創建視圖函數。
3. 當用戶與應用程序交互時，應用程序數據將如何變化？為此需要更新函數。

Hello Nanny State!

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

運行以下示例最簡單的方法是使用在線代碼編輯器（如 CodePen），或者你可以通過使用 NodeJS 安裝 nanny-state 包來在本地運行它。

將以下代碼複製到 CodePen 的 JS 部分：

<code class="language-javascript">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);</code>

這展示了 Nanny State 的三個部分如何協同工作。讓我們分別仔細看看每個部分：

<code class="language-javascript">const View = state => html`<h1>Hello ${state.name}</h1>`;</code>

Nanny State 使用 µhtml 渲染 HTML。視圖函數 始終 接受狀態對像作為其 唯一 參數。然後，它使用 µhtml 提供的 html 函數根據作為參數提供的模板字面量創建 HTML。

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

<code class="language-javascript">const State = {
  name: "Nanny State",
  View
};</code>

狀態對像是存儲所有應用程序數據的地方。它包含將在視圖中顯示的任何屬性和值，這些屬性和值可能會在應用程序的生命週期中發生變化，例如此示例中的 name 屬性。

請注意，View 也是使用對像簡寫表示法的 State 的屬性。記住 狀態就是一切——應用程序的每個部分都是狀態的屬性。

<code class="language-javascript">const Update = Nanny(State);</code>

最後一行將更新函數定義為 Nanny 函數的返回值。這現在可以用來更新 State 的任何屬性的值。事實上，這是更新 State 任何屬性的唯一方法。它還根據 State 中提供的值執行 View 的初始渲染。這意味著將顯示一個標題，上面寫著“Hello Nanny State”，如下面的 CodePen 所示：

...(後續內容與原文類似，只是對語言和表達方式進行了調整，保持了原文意思不變，並保留了所有圖片及其格式。)

以上是與保姆州的JavaScript中的簡單狀態管理的詳細內容。更多資訊請關注PHP中文網其他相關文章！