要回答你的问题还有很长的路

rmruhul

要走有时它的代码量比您自己可以或想要编写的代码量要多，但它并不像我认为我们认为需要的那么多。当我说你不需要框架时，我得到了很多关于这个想法的反对，“好吧，如果你不使用框架，那么你基本上是在编写自己的框架。” 那么这就带来了它自己的问题。我认为在使用 React 或 Vue 和编写自己的框架之间存在一个位置，并且可能会选择更小的东西。有时，根据您想要做什么，编写自己的框架实际上可能是正确的选择。这一切都非常不稳定和主观。

德鲁：非常有趣的是，作为学习练习，您实现了自己的基于状态 电报号码数据 的框架。我记得过去，我曾经认为每次我伸手去图书馆或其他东西时，我喜欢认为我可以自己实现它。

克里斯：一定一定。

德鲁：但去图书馆让我省去了这样做的麻烦。我知道如果我必须自己编写这段代码，我知道我会采取什么方法来完成它。一直到使用 jQuery 之类的东西都是如此。如今，我想如果我必须编写自己的 Vue 或 React 版本，我几乎不知道该库中所有代码中现在发生了什么。

德鲁：对于我们这些不熟悉的人来说，当你说像 Preact 放弃虚拟 DOM 并使一切变得更小这样的东西时，虚拟 DOM 给我们带来了什么？

克里斯：为了回答这个问题，我想稍微退一步。框架和其他基于状态的库为您提供的最好的东西之一就是 DOM diffing。如果您并没有真正更新 UI 太多，您可以这样说：“这是标记应该是什么样子的字符串。在 HTML 中，我将把所有这些标记放在这个元素中。” 当你需要改变某件事时，你会再做一次。这对于浏览器来说有点昂贵，因为它会触发重绘。

克里斯：但我认为可能比这更重要的是，这样做的问题之一是你在那里有任何类型的交互元素，一个表单字段，一个某人关注的链接。焦点丢失了，因为元素……即使你有一个看起来相似的新东西，它也不是相同的文字元素。因此，如果焦点丢失，可能会给使用屏幕阅读器的人带来混乱。这有一大堆问题。



克里斯：任何有价值的基于状态的 UI 事物都将实现一些 DOM 比较，他们说，“这就是 UI 应该是什么样子的。这是 DOM 中现在的样子。有什么不同？它将去改变这些事情。它实际上正在做您自己手动更新 UI 所需要做的事情，但它是在幕后为您做的。所以你可以说，“这就是我想要的样子。” 然后库或框架就会解决这个问题。

克里斯：像 Preact 或 Alpine 这样的小东西，他们实际上是直接这样做的。他们将您提供给他们的 UI 外观字符串转换为 HTML 元素。然后他们将每个元素与文本 DOM 中相应的部分进行比较。当你最终得到的 UI 变得越来越大时，这可能会对性能产生影响，因为一遍又一遍地查询 DOM 会变得昂贵。如果您想了解出现问题的界面类型，请右键单击并检查 Twitter 上“收藏夹”按钮或 Facebook 上“喜欢”按钮上的元素。看看 div 的嵌套，让您到达该元素。这是非常非常深的。它就像十几个左右的 div，一个嵌套在另一个 div 中，只是为了那一条推文。

克里斯：当你开始深入这么多层时，它开始真正影响性能。虚拟 DOM 所做的不是每次都检查真实 DOM，而是创建一个基于对象的 UI 在 JavaScript 中的映射。然后对您想要替换现有 UI 的 UI 执行相同的操作，并比较这两个 UI。从理论上讲，这比在真实 DOM 中实现的性能要高得多。一旦它获得了需要更改的内容的列表，它就会开始执行这些更改。但它只需要攻击 DOM 一次。它并不是每次都检查每一个元素。如果您有 Twitter、Facebook、QuickBooks 或类似的界面，那么虚拟 DOM 可能很有意义。