Hyperapp 是一个轻量级的 JavaScript 微型框架，它可以让你快速构建 Web 应用程序，且只有 1kB 的大小。在本文中，我们将会介绍 Hyperapp 的基本用法和一些高级特性。
安装
你可以使用 npm 或 Yarn 来安装 Hyperapp。
npm install hyperapp
或者
yarn add hyperapp
创建第一个 Hyperapp 应用
下面是一个使用 Hyperapp 创建简单计数器应用的示例：
-- -------------------- ---- -------
------ - -- --- - ---- -----------
----- ----- - -
------ --
--
----- ------- - -
----- -- -- ------- -- -- ------ ----------- - - ---
--- -- -- ------- -- -- ------ ----------- - - ---
--
----- ---- - ------- -------- --
-------- --- -
----------- - -------- ------------ -- -----
--------- --- -------------
----------- - -------- ---------- -- -----
---
---------- -------- ----- ---------------上述代码中，我们定义了一个状态对象 state，其中包含一个名为 count 的属性，初始值为 0。然后，我们定义了两个操作函数 down 和 up，用于减少或增加计数器的值。最后，我们定义了一个视图函数 view，用于渲染页面并响应用户操作。
使用 app 函数将状态、动作和视图函数绑定到文档的根元素上，即可创建一个完整的 Hyperapp 应用。在上述示例中，我们将应用绑定到了 document.body 上。
深入理解 Hyperapp
状态管理
Hyperapp 的核心思想是状态管理。它通过状态对象来存储应用程序的状态，并通过操作函数来修改该状态。当状态发生变化时，Hyperapp 会自动重新渲染页面。
状态对象通常是一个简单的 JavaScript 对象，其中包含应用程序的所有数据。如下所示：
const state = {
count: 0,
name: "John",
};操作函数是一组纯函数，用于接收当前状态并返回新状态。Hyperapp 使用了一种称为“函数柯里化”（currying）的技术，使得操作函数能够以更加直观的方式定义。如下所示：
const actions = {
down: () => (state) => ({ count: state.count - 1 }),
up: () => (state) => ({ count: state.count + 1 }),
};在上述示例中，down 和 up 操作函数均返回一个新函数，该函数接收当前状态并返回新状态。这种编程模式可以使代码更加清晰和易于理解。
视图函数
视图函数由 Hyperapp 自动调用，并负责呈现页面和处理用户交互。视图函数通常返回一个虚拟 DOM（Virtual DOM）树，Hyperapp 会将其与前一次渲染的虚拟 DOM 树进行比较，并只更新发生更改的部分。
视图函数可以使用 Hyperapp 提供的 h 函数来创建虚拟 DOM 节点。h 函数接收三个参数：节点类型、属性对象和子节点数组。如下所示：
-- -------------------- ---- -------
----- ---- - ------- -------- --
-------- - ------ ----------- -- -
------- --- ------- -----------------
------ --- -------- ----- --- -----------------
--
---------
-
-------- -----------
--
---
--
--
---------
-
-------- -------------
--
---
--
---上述代码中，我们使用 h 函数创建
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/38569