javascript 栈式创建GUI

自动创建、更新、删除UI树的方法

得自react的灵感.

function render(){
    text(() =>{
        this.txt = text({name:() => 'action', onChange:() => {}})
        div(() =>{
            text()
            text()
            text()
            c = () => text({name:'action', onChange:() =>{}})
            a = () => {
                for (let e in arr){
                    bar(e)
                    hline()
                }
            }
            b = ()=>{
                if (visible)
                    dialog()
            }
            if (visible){
                dialog()
            }
            TabView(() =>{
                TableView(()=>{
                })
            })
        })
        div()
    })
}

创建好说，更新才是问题。

更新有两种方式：

1. 类似于react有更新，直接重新执行render,与dom树比较，决定要新建节点，还是更新节点
2. 第一次创建视图时，所有要更新的点提取为函数，得到更新函数列表。后面更新时，逐一调用更新函数。同时，更新函数可以记录相关的节点，这样每次更新都是精准的，也不需要DIFF。

方式2的缺点在于，更新的点，要写成函数，对比方式1要麻烦些，优点在于更新精准