我一直在研究Elm、ReactJS和其他基于反应式/函数式-反应式范式的框架和语言。
我了解反应式编程的基本原理,以及为什么这样的系统可能有用。但我在脑海中对某些方面的概念化遇到了困难。
例如,我理解"view“或"build”函数的概念。在反应式web框架中,我们编写了一个函数,该函数获取程序的状态并返回表示显示的HTML元素列表。每次状态改变时,框架都会再次调用view函数,并重新构建显示。这些框架很聪明,因为它们可以将新元素与旧元素进行比较,并以最少的调用高效地更新页面。
然而,我很难理解元素是如何在对view函数的调用中被跟踪的,即框架知道新框架中的元素与旧框架中的元素是相同的。
为什么需要跟踪元素?因为,例如,GUI呈现器可能想要播放用于选中或取消选中框的动画。如果框架调用视图函数并在每次选中或取消选中框时重新构建显示,GUI呈现器将无法知道框不是从头开始创建的。因此,它将无法播放选中或取消选中的动画。
考虑一下Elm在http://elm-lang.org/examples/field的字段示例。当在字段中输入新字符时,将重建显示。将使用新状态再次创建文本框。从浏览器的角度来看,这就好像删除了旧的文本框,并在其位置创建了一个新的文本框。
现在,我认为我的理解是错误的,文本框实际上并没有被删除。但是我怎么能确定呢?反应式编程是否具有用于跟踪元素的可靠逻辑?
发布于 2018-05-06 10:47:55
这是使用虚拟DOM解决的。构建视图的虚拟版本并与当前版本进行比较,只有更改才会实际提交到DOM。如果具有特定特征的文本字段存在于虚拟DOM和实际DOM中,则不会删除和重新创建它,而只是保持原样,然后差异工具向下移动一层并检查内容和属性,依此类推。
这些都是实现细节,您不必关心它们,但是如果您想了解更多关于diffing如何工作的信息,可以阅读Elm的VirtualDom包here
https://stackoverflow.com/questions/50193733
复制相似问题