30Seconds|React,Vue,Angular,Hyperapp 等 JavaScript UI 库或框架的目的是什么？

Posted 2021-04-17 水煮不是清蒸

回答

    主要目的是避免直接操作 DOM 并使应用程序的状态能够简单的和 UI 保持同步。此外，他们还提供了创建组件的功能，在有相似功能（具有细小区别）的时候就可以进行重复使用，这样每当需要更新在多个地方重用的组件结构时就可以避免多个地方的重复修改。

像 jQuery 这样对 DOM 操作的库，应用程序的数据通常保存在 DOM 自身中，通常作为类名或者 data 的属性。操作 DOM 来更新 UI 涉及许多额外的步骤并且可能随着时间的推移产生细微的 bug。保持状态的分离，当状态有修改时才让框架去处理 UI 的更新可以降低复杂度。也就是说使用手动更新 UI 的方式来表示一个新状态可以改进为：当状态为某个值时，可以让 UI 以使用创建应用程序的声明方式进行展现。

加分回答

• 虚拟 DOM 用一个普通的对象来表示真实的 DOM 树，他允许一个库去编写类似放弃整个 document ，只在每次修改时才重新构建 DOM 的代码，而真实的 DOM 需要去更新他做过的所有修改。对比新的虚拟 DOM 和其前一个状态的虚拟 DOM 可以提高效率，因为和重新计算虚拟 DOM 相比，修改真实 DOM 节点需要更大的开销。

• JSX 是对 javascript 的扩展，他提供了类似 XML 的语法来创建虚拟 DOM 对象，通过转换器转换为函数调用。与标记模板语言相比，他简化了控制流程（if 语句/三元表达式）。