hyperapp.js 一个轻量级的 react 实现

最新推荐文章于 2024-08-15 09:39:54 发布

程鹏飞

最新推荐文章于 2024-08-15 09:39:54 发布

阅读量3.5k

点赞数

分类专栏：前端文章标签：前端 hyperappjs hyperapp react 库

本文链接：https://blog.csdn.net/u013707249/article/details/78980945

版权

hyperapp 是一个仅1kb的核心代码的前端库，提供类似 React 的开发体验。文章介绍了 hyperapp 的基本概念、简单使用方法、核心源码解析，特别是 `init` 和 `patch` 方法，并与其他类似库如 preact 进行对比。尽管 hyperapp 小巧且易于学习，但在实际项目中仍需权衡。

摘要由CSDN通过智能技术生成

hyperapp 是什么鬼？

hyperapp 是一个前端的应用构建库。初见写法，很有一种写react的亲切的感觉（其实就是一个套路），不过这肯定不能成为吸引广发gay友从而在短短两个月拿到 8K star的理由。更重要的一个原因是官方宣称的1kb。是的， hyperapp 的核心代码只有1kb，这对早已习惯react全家桶，同时对当今web应用一个页面动辄3、4M毒害的gay友来说，的确是一个福音。基于此，官方给自己的定位是：

更小：只要1kb，做到其他框架应该做的；
更实用：主流的前端应用思想，不会对学习带来额外负担；
开箱即用：完善的虚拟Dom、key更新、应用生命周期。
以上个人翻译，有吹嘘成分

既然听起来这么厉害，今天就来一探究竟了……

简单的使用

最简单的使用方法就是看官网给的 计数器 示例，可以在这里查看最终效果：

<body>
<script src="https://unpkg.com/hyperapp"></script>
<script>

// ******划重点

const { h, app } = hyperapp

const state = {
  count: 0
}

const actions = {
  down: value => state => ({ count: state.count - value }),
  up: value => state => ({ count: state.count + value })
}

const view = (state, actions) =>
  h("div", {}, [
    h("h1", {}, state.count),
    h("button", { onclick: () => actions.down(1) }, "–"),
    h("button", { onclick: () => actions.up(1) }, "+")
  ])

window.main = app(state, actions, view, document.body)

// *****划重点
</script>
</body>