GUI即图形化用户接口。 网页端、桌面客户端、移动端开发的主要工作内容都是围绕在“如何创建GUI和更新GUI”上。
GUI架构
GUI有两种模式：
- 保留模式 RMGUI
- 即时模式 IMGUI
其中，即时模式基本上只在编辑器开发中存在。即时模式最出色的应用有：Unity和Blender(存疑）。
GUI要解决的问题主要是：
- 渲染 边框、背景、文本、颜色、渐变、图片等等
- 事件分发
事件分发今天且略过。
保留模式
页面以树的形式表示，树的每个节点可能都对应着一个控件，如按钮、文本、图片。 控件上存有该控件的属性，以HTML为例，每个控件上存在着成百个属性，来控制控件的布局（测量与定位）、渲染。
开发人员对页面的更新，就是在创建节点、移动节点、删除节点，修改节点属性。
即时模式
即时模式大约可以认为，框架给你一些画画的函数，可能还会封装下画按钮啦、下拉框啦，然后让开发人员给定渲染函数，框架会定时--通常是16.6MS--调用。
以Unity为例：
void OnGui(){
GUI.Button(new Rect(0, 0, 100, 100), "按钮");
GUI.Button(new Rect(0, 120, 100, 100), "按钮");
}
更新ui
即时模式解决保留模式的痛点在于，保留模式怎么保持ui与状态的同步。
- 手动更新
状态变了，在代码里写明哪些视图的哪些属性要更新 - 监听式手动更新
监听状态的变化，在回调函数里写明哪些视图的哪些属性要更新 - 绑定式更新
绑定状态与要更新的视图的属性，状态变化后，视图会自动更新。（有点自动的味道） - 虚拟dom更新
监听状态变化，生成虚拟dom,让库自动比较并应用。（优点:声明式，生成的虚拟dom可以远程传输）
性能从高到低，
方便性从低到高
分解
ui的更新实际上可以分解成两个部分：
- when 什么时候
- what 更新什么
即时模式解决第一个问题，采用的是每帧更。解决第二个问题，采用的是poll
保留模式解决第一个问题，通常是监听状态变化。要做成定时更也是可以的。
保留模式解决第二个问题，从前是手写更新，后面有通过模板建立绑定关系，自动更新，再后面有react的革命，采用虚拟dom更新，带来更好的抽象，更简单的认知。
还有像ue slate的更新方式，会变化的属性设值为回调函数，想要更新时，只要执行下回调函数，就可以更新了，称之为poll方式的更新。这种方式做全量更新也很方便，遍历视图树，调用节点的所有更新回调函数（属性，for, if).
为避免多余的更新，可以建立trace,来监听上次更新时用到的状态与此次更新时状态的不同，状态有变，才更新相应的视图。
这些手法的自动化程度逐步提高，但核心要写的逻辑，即状态到属性的映射，if, for都是不可避免的。
如何同步数组
for (let e in data){
//识别新增还是可重用视图
let node = get_or_create(nodes, key)
if (node == null) {
node = create()
}
//新增和可重用视图都可以统一调用更新函数
this.update();
}
//移除未使用
remove_unuseds();
全量更新
- 全删，然后重建所有
- 识别，然后更新不同
2.1 (get or create)->(update)->(remove unused)
2.2 记录更新关系到节点上，或者到模板上。 遍历调用这些关系
2.3 虚拟dom. 生成视图快照，应用快照。
模糊更新
某状态变化后，全量刷新本组件视图。
为避免多余，可采用trace状态
精确更新
1。 手动
2。 直接关联 模型状态与视图状态的， 如javafx的可观察属性，如果vue的模板
js ui写法1
div(attr)
(span)
(div
(label)
('sdfsdf')
)
(span)
(span)
js ui写法2
div(attr)(
span(),
div()(
if_(true && label()),
text('sdfsf')
),
span(),
span()
)
