简单吐槽现代框架数据绑定机制

186 阅读2分钟

现代框架处理数据绑定的时候给人的感觉都比较复杂,其背后还有一套复杂的响应式实现。比如 Vue,通过监听对象的取值行为,来建立当前正在处理的视图和该值之间的联系,当对象的值变更后会通过这一层联系更新对应的视图。

React 我不是很熟悉,它建立数据与视图的联系应该比较简单,如果数据变了就直接走一遍初始化就行了,也就是只要有数据变更 React 的组件函数就会运行一次。这种机制非常低效,所以 React 团队就想方设法地通过一些手段去优化这个过程,包括使用虚拟 DOM ,添加 Diff 过程等。不过这些手段总不是那么容易的,结果就是概念满天飞,给人一种复杂的感觉。

而一些新兴框架,比如 Svelte,则是通过编译的手段把数据与视图联系起来,虽然真正开发的时候会简单一点,但它毕竟是需要编译的,它的一些语法并不是 JavaScript 的语法。凡是涉及到编译这个概念的,都会给人一种复杂的感觉,而且往往有一种是在写另一种语言的感觉。

那么不禁让人产生一种思考,有没有一种更简单的数据绑定的方法,不需要复杂的优化,同时概念又特别简单,执行又非常高效,且使用的是原生的 JavaScript 进行开发。

当一个人重新思考某些事物的时候,是一定可以想出一些令人惊讶的点子的,但大部分人不会去做「重新思考」。

首先原生 JavaScript 作为一门通用的编程语言,其表达能力肯定是完备的,并且有「函数」这种强大的机制存在,它当然可以有更多的可能。

那么应该怎么做呢?有希望做的更简单吗?