Javascript 为什么需要在React.js中创建虚拟DOM，而不是直接更新浏览器DOM中的所有节点？

在react js中，在reander中创建虚拟DOM，与浏览器DOM进行比较，并更新浏览器DOM。与其使用虚拟DOM，不如直接在浏览器DOM中更新。

性能。读/写DOM非常昂贵。计算JS数据结构上的更改，然后只在真实DOM上进行最小数量的更改，速度要快得多。除了一些特殊情况，您可以避免一起阅读浏览器DOM，这就是为什么react如此之快

检查这个简单的基准测试，因为您可以看到阅读并不昂贵。写作也不贵，但阅读和写作贵得离谱。（updateNode函数执行读写操作）

---

图像取自我真正推荐的talk。

DOM由浏览器渲染的节点组成。当您的应用程序接收到来自用户的输入时，它必须更改某些节点以显示其响应（例如，当用户单击按钮时，按钮从红色变为蓝色）。现在，DOM不擅长做任何聪明的事情。因此，任何时候任何更改，它都会从头开始重新渲染每个节点。这是一个代价高昂的过程

React通过告诉DOM渲染哪个节点以及保留哪个节点，将大脑添加到DOM中。（例如-除了按钮，UI中的所有其他内容都不应更改）。这是通过将DOM的状态以嵌套对象的形式存储在JS中（形成树状结构）来实现的。对该对象的特定部分所做的更改将有助于确定DOM树的哪个部分实际上需要重新呈现。这是使用不变性的概念完成的，这在ReactJS文档中有很好的解释。因此，它基本上区分了新对象和旧对象，并告诉DOM仅对特定节点进行更改，从而将性能提高了很多倍