我一直在研究 Elm、ReactJS 以及其他基于响应式(Reactive)/功能响应式(Reactive)范式的框架和语言。
我了解响应式(Reactive)编程如何工作的基础知识，以及为什么这样的系统可能有用。但我很难在脑海中概念化某些方面。
例如，我理解“查看”或“构建”功能的概念。在响应式 Web 框架中，我们编写一个函数来获取程序状态并返回表示显示的 HTML 元素列表。每次状态改变时，框架都会再次调用 View 函数并重建显示。这些框架很聪明，因为它们可以将新元素与旧元素进行比较，并以最少的调用有效地更新页面。
但是，我无法理解如何在调用 View 函数时跟踪元素，即框架知道新框架中的元素与旧框架中的元素相同。
为什么需要跟踪元素？因为，例如，GUI 渲染器可能想要播放动画来选中或取消选中某个框。如果框架调用 View 函数并在每次选中或取消选中某个框时重建显示，则 GUI 渲染器将无法知道该框不是从头开始创建的。因此，它将无法播放选中或取消选中动画。
考虑 Elm 的字段示例 http://elm-lang.org/examples/field 。当在字段中输入新字符时，将重建显示。将使用新状态再次创建文本框。从浏览器的角度来看，就好像旧的文本框被删除，并在其位置创建了一个新的文本框。
现在，我认为我的理解是错误的，文本框实际上并没有被删除。但我怎么能确定呢？响应式(Reactive)编程是否有可靠的逻辑来跟踪元素？
最佳答案
这是使用虚拟 DOM 解决的。构建 View 的虚拟版本并与当前版本进行比较，并且仅将更改实际提交到 DOM。如果虚拟 DOM 和实际 DOM 中存在具有某些特征的文本字段，则不会删除并重新创建它，而是将其保留下来，然后比较工具向下移动一个级别并检查内容和属性，依此类推。
这些是实现细节，您无需关心它们，但如果您想了解更多有关 diff 工作原理的信息，您可以阅读 Elm 的 VirtualDom 包 here
关于reactjs - 在功能 react 范式中如何跟踪 "frames"之间的对象？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50193733/