对现代前端框架的理解
· One min read
代码狗
我属于后 JQuery 时代的前端开发，但多少了解 JQuery 的开发模式。
命令式与声明式#
显然，JQuery 属于命令式开发模式，改变状态 + 操作 DOM。对应的，Vue、React、Angular 属于声明式，声明式是通过描述状态与视图之间的映射关系，通过改变状态改变视图。这样就从传统的 DOM 操作解放出来，可以说，现代框架是 Web 应用复杂化后必然的产物。
只维护状态而不关注如何操作 DOM 大大降低了代码的维护成本。但随着项目的愈来愈复杂，维护状态也变得艰难起来，所以才出现了 Vuex，Redux 等解决方案。
渲染（render）#
状态改变到视图更新需要渲染，换句话说，将状态生成 DOM 插入到页面展示在用户界面上，这一套流程叫做渲染。可以用一个公式表示：
UI = render(state)
当状态改变需要重新渲染页面，当涉及到的 DOM 标签少时使用innerHTML可以将页面整体刷新，框架如何实现局部刷新呢？
这个问题，现代框架提供了不同的解决方案。如 Vue 和 React 的 VirtualDOM，Angular 的脏检测机制，也可以是 Vue1.0 中的细粒度绑定。