现代 JavaScript 框架存在的主要原因

我见过许多人盲目地使用像React，Angular或Vue.js这样的现代框架。这些框架提供了许多有趣的东西，通常人们会忽略这些框架存在最主要的原因，这些原因不是：它们基于组件;它们有一个强大的社区;它们有很多第三方库;它们有很多有用的第三方组件;它们有浏览器插件，可以帮助调试;它们适用于单页面应用程序。

这些都不是最本质的原因，最本质的原因是保持UI和状态同步并不容易。

UI和状态同步难在哪？假如，您正在构建一个Web应用程序，用户可以填写他人的email地址来发起邀请。并且邀请列表有两种状态：空状态，我们在这个状态下提示用户填写邮箱。非空状态，这种状态我们需要列出出等待被邀请的用户，并且提供删除按钮。

尝试使用纯JavaScript实现这种功能源码和效果可以到参考：codepen。

它不仅编写起来复杂而且还很脆弱。想象一下，我们需要实现将列表于服务器同步的功能。我们需要将本地数据和服务器发来的数据进行比较。并且需要点对点的对每个变更同步到DOM节点中。如果这个过程中有每一步出现差错都直接导致UI同步失败。因此，维护UI与数据同步需要编写大量繁琐，脆弱和脆弱的代码。声明式UI解决方案

它是不是社区，它不是工具，也不是生态系统，也不是第三方库......到目前为止，这些框架提供的最大的改进是实现应用状态和UI同步。我们只需要定义一次UI，不必编写为每一次动作编写UI。相同的状态总能得到相同的UI输出（状态和UI同步，状态变更后会自动更新UI）。原理有两个基本策略：重新渲染整个组件：React。

下面是基于Component重写的邮箱邀请的应用（借助babel变换来支持JSX）这里是源码：