摘要：寫在最后總體來說，是一個小而美的框架，值得我們來折騰一下，以上均為本人理解，如有錯誤還請指出，不勝感激一個硬廣我所在團隊工作地點在北京求大量前端社招實習，有意者可發簡歷至

沒錯，又是一個新的前端框架，hyperapp非常的小，僅僅1kb，當然學習起來也是非常的簡單，可以說是1分鐘入門。聲明式：HyperApp 的設計基于Elm Architecture（這也意味著組件更多的是純函數），支持自定義標簽以及虛擬DOM。下面先來看下怎么使用：

import { h, app } from "hyperapp";

app({
    state: {
        count: 0
    },
    view: (state, actions) => (
        

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

（完整demo可以參見這里）
這樣就完成了一個Counter，基本由state，view，actions構成：

state: 與react中的如出一轍，state的改變會引起重新渲染

view: 相當于react中的render

actions: 對state進行改變

h相當于react的createElement，來看下h接收的參數：

tag: 標簽名，或者一個函數，傳入函數也就意味著無狀態組件

data: 相當于react中的props

children: 子節點

需要注意的一點是，hyperapp并不支持boolean類型，對于boolean類型會忽略，使用時注意將其轉化為string類型，如：

Test {true}
             // Test
Test {String(true)}
     // Test true

至于為什么？可以參見源碼

下面來看一下其生命周期，對于hyperapp的整個運行過程，可以參見下圖：

load：相當于react的componentWillMount

update：相當于react的componentWillUpdate

render：調用view函數之前調用

action：調用actions之前，一般用來進行log

resolve：調用actions之后，對于一個異步操作來說，actions返回一個promise，生命周期resolve來處理，返回一個函數update => result.then(update)，即框架內部調用update來更新state，重新渲染
具體代碼可以參考：

// 生命周期： action  ->  actions[key]  ->  resolve
// 異步請求需要利用resolve
emit("action", { name: name, data: data });

var result = emit("resolve", action(appState, appActions, data));

return typeof result === "function" ? result(update) : update(result);

對于每一個節點來說，有著三個特殊的屬性：

oncreate：相當于componentDidMount

onupdate：相當于componentDidUpdate

onremove：與componentWillUnMount類似，需要注意的是，加入有了這個屬性，那么當節點需要被移除時，也不會被移除，需要自己來從dom中移除，這樣設計是為了便于做一些淡入淡出等效果，具體源碼可以參見這里，更多的使用方式以及討論可以參見這里

三個屬性均為函數，接收一個參數，就是這個節點

通過上面，基本上可以了解hyperapp的基本寫法，下面來看一下如何自定義組件：

const Header = ({ title, caption }) => (
    

        

            {title}
            {caption}
        
    
);
// 使用

無狀態組件的寫法與react基本一致，hyperapp官方給出的自定義組件的方式僅僅有這種，但是所有的組件都要是無狀態的？？？答案當然是否定的，如何實現“智能組件”是一個問題：

利用app方法實現

我們通常的期望業務組件具有一些基本的功能，比如數據獲取展現這種：

const Header = app({
    state: {
        caption: "loading"
    },
    view(state, actions) {
        return (
            
{state.caption}
        );
    },
    actions: {
        fetchData(state) {
            return new Promise((resolve) => {
                // 模擬fetch數據
                setTimeout(() => {
                    state.caption = "ok";
                    resolve(state);
                }, 1000);
            });
        }
    },
    events: {
        load(state, actions) {
            actions.fetchData(state);
        },
        resolve(state, actions, result) {
            if (result && typeof result.then === "function") {
                return update => result.then(update);
            }
        }
    }
});

export default Header;

按照如下方式使用：

import Header from "./Header";
...
state: {
    count: 0
},
view: (state, actions) => (
    

        

        
{state.count}
    
),
...

打開頁面，從ui來看已經實現組件封裝，但是這種是一種”曲線“的實現方式，為什么說它是不正規，可以觀察其dom層級，可能與我們理解和期望的并不相同。我們期望得到的層級是：

body
    main
        header
        h2

但是事實上得到的層級為：

body
    header
    main
        h2

至于為什么會產生這種情況，需要看一下源碼：

app做了什么？

// app接收一個對象
function app(props) {
    ...
    // appRoot 就是需要掛載到的根節點
    var appRoot = props.root || document.body
    ...
    // 注意此處，下文會用到
    return emit;

    ...
    // 利用raf調用render渲染ui
    function render(cb) {
         element = patch(
            appRoot,
            ...
        );
    }
    ...
    function patch(parent, ...) {
        if (oldNode == null) {
            // 第一次渲染,將節點插入到appRoot中
            // 只要是第一次掛載,element為null
            element = parent.insertBefore(createElement(node, isSVG), element);
        }
        ...
    }
}

所以說將Header組件掛載的原因并不是我們通過jsx寫出了這層結構，而是在import的時候，就已經將其掛載到了document.body下，main在掛載到document.body時，被插入到子節點的末尾。

去哪兒了？

h(tagName, props, children)

function h(tag, data) {
    // 根據后續參數，生成children
    while (stack.length) {
        if (Array.isArray((node = stack.pop()))) {
            // 處理傳入的child為數組    
            for (i = node.length; i--; ) {
                stack.push(node[i]);
            }
        }
        ...
    }
    ...
    return typeof tag === "string" ? {
        tag: tag,
        data: data || {},
        children: children
    } : tag(data, children);
}

function emit(name, data) {
    // 一個不常見的寫法,這個寫法會返回data
    return (
        (appEvents[name] || []).map(function(cb) {
            var result = cb(appState, appActions, data);
            if (result != null) {
                data = result;
            }
        }),
        data
    );
}

// 改進Header組件
const Header = (root) => app({
    root,
    ...同上
});

// 改進引入方式
view: (state, actions) => (
    

        
 Header(e)}>
        
{state.count}
    
),

export const HeaderView = ({ text }) => (
    
{text}
);

export const HeaderMixins = () => ({
    state:   // 同上
    actions: // 同上
    events:  // 同上
});

import { HeaderView, HeaderMixins } from "./HeaderView";
...
state: {
    count: 0
},
view: (state, actions) => (
    

        
        
{state.count}
    
),
mixins: [
    HeaderMixins()
]
...