Hyperapp的h()和text()完全讲解用纯函数构建Virtual DOM节点的7个要点【免费下载链接】hyperapp1kB-ish JavaScript framework for building hypertext applications项目地址: https://gitcode.com/gh_mirrors/hy/hyperappHyperapp 是一个仅约 1 kB 的轻量级 JavaScript 前端框架而h()与text()正是它构建Virtual DOM虚拟 DOM节点的两块基石。本文面向新手用 7 个要点讲透这两个纯函数的用法从函数签名、class 的三种写法到 key 与事件绑定、text() 的正确打开方式帮你快速上手这个极简框架的视图层。先认识h() 和 text() 在框架里的定位在 Hyperapp 中视图View是一段声明式描述——不写 HTML 标签而是用函数画出页面结构。views.md 明确指出h()、text()、memo()是构建视图的三大积木。函数职责返回h()描述一个 HTML/SVG 元素节点并可挂属性与事件元素 VNodetext()描述一段纯文本内容文本 VNodememo()配合组件实现记忆化跳过重复渲染缓存型 VNode两者都是纯函数不碰 DOM、不读全局状态输入相同则输出恒等。这也是 Hyperapp 能实现精准 diff 的前提。要点一只描述、不执行的纯函数h()的完整定义只有短短几行位于核心源码 index.jsexport var h (tag, { class: c, ...props }, children EMPTY_ARR) createVNode( tag, { ...props, ...(c ? { class: createClass(c) } : EMPTY_OBJ) }, isArray(children) ? children : [children] )可以看到调用h()只是生成一个普通 JavaScript 对象VNode此时浏览器里什么都不会发生。真正创建 DOM 元素要等到渲染阶段的createNodeindex.js#L94-L118把 VNode 逐一落到真实页面上。 这种先描述、后执行的设计让视图可以像数学函数一样自由组合、测试和比较。要点二h() 的三个参数tag、props、childrenh.md 给出的签名是h : (String, Object, VNode? | [...VNodes]?) - VNodeh(p, {}, text(You must construct additional pylons.))tag元素名如div、button也支持 SVG 与自定义元素props属性对象必传没有属性就写{}children子节点可以是单个 VNode也可以是 VNode 数组index.js#L360 会自动包装生成的 VNode 结构一目了然单元测试 tests/index.test.js 给出了精确断言{ tag: zord, props: { foo: true }, key: undefined, children: [], node: undefined }还有一个容错细节children 里若出现false、0、、null这类空值maybeVNodeindex.js#L320-L329会统一替换为text()所以state.flying h(...)这种条件渲染可以放心写。要点三class 属性的三种灵活写法class是h()唯一会被特殊处理的常用属性——它交给createClassindex.js#L11-L29解析支持三种格式且可任意嵌套格式示例适合场景字符串class: muggle-studies固定类名可空格分隔多个对象class: { active: state.on }按条件开关类名数组class: [{ a: x }, b, y c]混合上述两种支持无限嵌套对象和数组形式让根据状态切换样式变得极其直观无需手写字符串拼接。要点四key、style 与 on* 事件绑定除class外还有三个高频属性值得单独记住style传 CSS 对象驼峰或带引号的连字符都可以如font-weight: boldkey从 props 中自动提取见 createVNode为列表项提供稳定身份。没有 keydiff 算法只能假设全部变化有了 key重排列表也能精准复用节点on*事件所有onclick、oninput等属性绑定的是**动作Action**而非回调。源码 index.js#L77-L84 中on前缀的 prop 会被收集到node.events里触发时统一交给dispatch处理——这就是 Hyperapp 事件 → 动作 → 状态更新 单向数据流的入口h(input, { type: checkbox, id: picard, checked: state.engaging, oninput: NewValue })要点五text() 的正确打开方式text() 是创建文本节点的专属函数export var text (value, node) createVNode(value, EMPTY_OBJ, EMPTY_ARR, TEXT_NODE, node)index.js#L353-L354它的要点有三接受字符串或数字实际渲染时会转为字符串测试用例text(hyper)产出tag: hyper, type: 3传数组或对象会产出你不想要的内容请避免没有 props、没有 children——文本节点就是叶子不要试图给它加属性必须用h()包进元素里才可见h(p, {}, text(state.message))text()的存在让 Hyperapp 的 diff 实现更简单文本变化只需比较tag是否相等index.js#L127不等才更新nodeValue。要点六组合出组件与视图单个h()text()只是积木真正的威力在组合。视图是接收状态、返回 VNode的纯函数const coinsDisplay (state) h(div, { class: coins-display }, text(state.coins))组件不必关心全局状态也可以只接收局部数据views.mdconst questionBlock (opened) opened ? h(button, { class: question-block opened }, text(?)) : h(button, { class: question-block, onclick: HitBlock }, text(?))多个子视图放进 children 数组即可拼装成页面组件返回数组时用...展开到兄弟节点列表里。要点七条件渲染与常见坑位清单最后整理实战中最容易踩的坑场景正确做法原因条件显示元素state.on h(div, {}, ...)空值自动转为text()无需 if 语句列表渲染每项h(li, { key: item.id }, ...)key 保证 diff 精准复用节点文本内容一律text(value)包裹裸字符串不是 VNode无法参与 diff无属性的元素props 仍要写{}它是h()的必传参数复杂 CSS 属性style传对象而非字符串连字符属性需引号font-size✅ 记住一句话h() 负责骨架text() 负责血肉状态变化驱动它们重新描述Hyperapp 只更新真正的差异。总结7 个要点速查表#要点一句话记忆1纯函数只生成对象不碰 DOM2三参数签名tag props必传 children可单可数组3class 三写法字符串 / 对象 / 可嵌套数组4特殊属性style 传对象on* 绑定动作5text() 用法只传字符串/数字无 props 无 children6组件组合视图 状态 → VNode 的纯函数7条件渲染/\|\|直接写在 children 里想继续深入推荐阅读API 文档h.md · text.md架构原理views.md · state.md核心实现index.js全文仅 400 余行值得逐行品读类型定义index.d.tsElementVNode与TextVNode的完整结构上手教程tutorial.md【免费下载链接】hyperapp1kB-ish JavaScript framework for building hypertext applications项目地址: https://gitcode.com/gh_mirrors/hy/hyperapp创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考