深入理解虚拟 DOM，它真的不快

文章转载自公众号 前端桃园 前端桃园 ， 作者 桃翁

使用过 React 的同学对于 Virtual DOM 并不陌生，作为 React 的重要核心概念，Virtual DOM 凭借其高效的diff算法，让我们不用关心应用的性能问题，毫无顾忌地修改各种数据状态。在实际的开发中，我们并不需要关注 Virtual DOM 在一个框架中是如何运行的，但是理解 Virtual DOM 的实现原理却是非常有必要的，同时也有助于我们更加深入 React。

目录

• 前端应用状态管理
• 什么是Virtual DOM
• Virtual DOM三板斧
• 更新视图
• 动手实现Virtual DOM
• 进一步思考
• 再次审视Virtual DOM

深入理解虚拟 DOM，它真的不快

结语

本文对 Virtual DOM 有一个简单的介绍，包括实现的部分也很简单，甚至对列表的diff算法也偷工减料，跟多高级的特性也没有涉及，比如事件绑定、生命周期、JSX 语法等，如果加上这些内容，就是一个小型版的 React 了。

本文旨在让大家了解并认识 Virtual DOM 的基本概念、组成和实现，同时对 Virtual DOM 更深层的意义有所了解，这样在以后用到相关的框架的时候也不会两眼一抹黑了，起码在性能优化上有点认识，比如列表要带上 key 这样基本的优化操作。

转载请注明：OnlyLing - Web 前端开发者 » 深入理解虚拟 DOM，它真的不快