我见过许多人盲目地使用像React,Angular或Vue.js这样的现代框架。这些框架提供了许多有趣的东西,通常人们会忽略这些框架存在最主要的原因,这些原因不是:它们基于组件;它们有一个强大的社区;它们有很多第三方库;它们有很多有用的第三方组件;它们有浏览器插件,可以帮助调试;它们适用于单页面应用程序。
这些都不是最本质的原因,最本质的原因是保持UI和状态同步并不容易。
UI和状态同步难在哪?假如,您正在构建一个Web应用程序,用户可以填写他人的email地址来发起邀请。并且邀请列表有两种状态:空状态,我们在这个状态下提示用户填写邮箱。非空状态,这种状态我们需要列出出等待被邀请的用户,并且提供删除按钮。
尝试使用纯JavaScript实现这种功能源码和效果可以到参考:codepen。
它不仅编写起来复杂而且还很脆弱。想象一下,我们需要实现将列表于服务器同步的功能。我们需要将本地数据和服务器发来的数据进行比较。并且需要点对点的对每个变更同步到DOM节点中。如果这个过程中有每一步出现差错都直接导致UI同步失败。因此,维护UI与数据同步需要编写大量繁琐,脆弱和脆弱的代码。声明式UI解决方案
它是不是社区,它不是工具,也不是生态系统,也不是第三方库......到目前为止,这些框架提供的最大的改进是实现应用状态和UI同步。我们只需要定义一次UI,不必编写为每一次动作编写UI。相同的状态总能得到相同的UI输出(状态和UI同步,状态变更后会自动更新UI)。原理有两个基本策略:重新渲染整个组件:React。
下面是基于Component重写的邮箱邀请的应用(借助babel变换来支持JSX)这里是源码:
领取专属 10元无门槛券
私享最新 技术干货