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

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 } = hyperappconst 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>

显而易见，state 定义了应用的状态， view 定义了应用的视图，通过 h 方法生成一个虚拟Dom,也就是可以被浏览器解释的结点树，action 则定义了应用的一些行为逻辑，最后在通过 app 方法挂载到真实的Dom元素结点上。

当然这只是很简单的使用。对于已经习惯了react写法的我们来说，我们可能在 view 的部分更习惯写纯函数，或者说一些牵扯到生命周期的操作，当然这些在 hyperapp 中也是可以的。

具体的操作可以参考 官方文档。

看源码吧还是

当然学习使用不是我们的目的，这些操作其他库中都有实现，真正感兴趣的是他说的1kb，所以还是来看源码吧（讲真，源码写的有点绕）。

核心的方法只有两个，h 函数和 app 函数，h函数很简单，只是用来构建 dom 结点的。源码如下：

/*** 先来看h的用法，作用是生成一个虚拟dom节点* name 可以是 一个标签名字符串，如‘div’, 也可以是一个已经被渲染的component，如‘h(div,'',)’* props 标签的属性定义，如‘class’，事件等* 不定参数，都会当做当前节点的子节点计算*/export function h(name, props) {var nodevar stack = []var children = []for (var i = arguments.length; i-- > 2; ) {stack.push(arguments[i])}while (stack.length) {if (Array.isArray((node = stack.pop()))) {for (i = node.length; i--; ) {stack.push(node[i])}} else if (null == node || true === node || false === node) {} else {children.push(typeof node === "number" ? node + "" : node)}}return typeof name === "string"? {name: name,props: props || {},children: children}: name(props || {}, children)
}

app 方法则是项目的入口，整个构建的操作其实在这里执行。在app函数里又定义了许多常用的工具方法，比如 createElement（创建元素），getKey（获取元素结点的key），removeElement（移除元素）等等。又很多，这里不在一一分析，重点方法只有两个 init 方法和 patch方法。

init()

init的方法的调用还是挺有意思的，如下：

repaint(init([], (state = copy(state)), (actions = copy(actions))))

可理解成：

function a() { console.log('a'); setTimeout(b); }
function b() { console.log('b') }
function c() { console.log('c') };a(c());

其实就是确保在入口的 repaint 方法每次被调用的时候先执行 init 方法。

我们来看 init 方法的主体部分：

// actions 有两种情况，一种是参数只存在state的情况，一种是参数存在state和action的情况,又是讨厌的递归function init(path, slice, actions) {for (var key in actions) {typeof actions[key] === "function"? (function(key, action) {actions[key] = function(data) {// 第一次初始化的时候，path为[]，所以得到的还是初始传入的stateslice = get(path, state)  // actions参数中存在action的情况，同时执行重新渲染一次if (typeof (data = action(data)) === "function") {data = data(slice, actions)}if (data && data !== slice && !data.then) {repaint((state = set(path, copy(slice, data), state, {})))}return data}})(key, actions[key]): init(path.concat(key),(slice[key] = slice[key] || {}),(actions[key] = copy(actions[key])))}}

其实 init 方法的目的就是确保了两种执行 repaint 方法的不同情况（有个看源码的小技巧就是去看官方提供的单元测试，来反推某个方法的用法）。init 方法的目的是执行 repaint 方法（真实渲染的方法入口，最终会执行 patch 方法）。

patch()

function patch(parent, element, oldNode, node, isSVG, nextSibling) {if (node === oldNode) {} else if (null == oldNode) {element = parent.insertBefore(createElement(node, isSVG), element)} else if (node.name && node.name === oldNode.name) {updateElement(element, oldNode.props, node.props)var oldElements = []var oldKeyed = {}var newKeyed = {}for (var i = 0; i < oldNode.children.length; i++) {oldElements[i] = element.childNodes[i]var oldChild = oldNode.children[i]var oldKey = getKey(oldChild)if (null != oldKey) {oldKeyed[oldKey] = [oldElements[i], oldChild]}}var i = 0var j = 0while (j < node.children.length) {var oldChild = oldNode.children[i]var newChild = node.children[j]var oldKey = getKey(oldChild)var newKey = getKey(newChild)if (newKeyed[oldKey]) {i++continue}if (null == newKey) {if (null == oldKey) {patch(element, oldElements[i], oldChild, newChild, isSVG)j++}i++} else {var recyledNode = oldKeyed[newKey] || []if (oldKey === newKey) {patch(element, recyledNode[0], recyledNode[1], newChild, isSVG)i++} else if (recyledNode[0]) {patch(element,element.insertBefore(recyledNode[0], oldElements[i]),recyledNode[1],newChild,isSVG)} else {patch(element, oldElements[i], null, newChild, isSVG)}j++newKeyed[newKey] = newChild}}while (i < oldNode.children.length) {var oldChild = oldNode.children[i]if (null == getKey(oldChild)) {removeElement(element, oldElements[i], oldChild)}i++}for (var i in oldKeyed) {if (!newKeyed[oldKeyed[i][1].props.key]) {removeElement(element, oldKeyed[i][0], oldKeyed[i][1])}}} else if (node.name === oldNode.name) {element.nodeValue = node} else {element = parent.insertBefore(createElement(node, isSVG),(nextSibling = element))removeElement(parent, nextSibling, oldNode)}return element}

具体的方法什么意思就不一一解释了，有一点要注意的是，这个库用了很多小套路，如果想要理解的话，最好先去好好理解下 JS 中的()是什么意思？

源码

太长就不放了，放个链接吧。戳。

其他类似的

其实类似的实现还有 preact ，不过 preact 大了一丢丢，但是在知名度和可靠性上肯定是 preact
遥遥领先的，本文只是用来学习，真正项目使用的话还是要慎重考虑的，优先考虑 react 和 preact 这些。

总结

写到这里感觉自己也是似懂非懂的了，一定是源码看的太少了……

以后继续加油，拜拜