解决了原始html,css,js的UI与数据状态之间同步的难题,避免了大量的操作DOM代码。
使用了React,Angular和Vue,我们只需要定义一次 UI 界面,不再需要为每个操作编写特定的 UI 代码,同时,每个相同的状态均有相同的输出:当状态改变后,框架自动更新(对应的)视图。
框架工作:
React:
重新渲染整个组件。当组件中的状态发生改变时,在内存中计算出(新的)DOM 结构后与已有的 DOM 结构进行对比。这样会消耗很多资源。因而采取(将真实 DOM)映射为虚拟 DOM ,通过对比状态变化前后虚拟 DOM 的不同,计算出变化后再改变真实 DOM 结构。这个过程称为调和(reconciliation)。
Angular和Vue:
添加Observer监测变化,如 Angular 和 Vue.js。应用中状态的属性会被监测,当它们发生变化时,只有依赖了(发生变化)属性的 DOM 元素会被重新渲染。