本文共 2856 字，大约阅读时间需要 9 分钟。
虚拟dom
Many existing frameworks, before React came on the scene, were directly manipulating the DOM on every change.
在React出现之前，许多现有框架都在每次更改时直接操作DOM。
First, what is the DOM?
首先，什么是DOM？
The DOM (Document Object Model) is a Tree representation of the page, starting from the <html> tag, going down into every child, which are called nodes.
DOM( 文档对象模型 )是页面的树形表示形式，从<html>标记开始，向下进入每个称为节点的子级。
It’s kept in the browser memory, and directly linked to what you see in a page. The DOM has an API that you can use to traverse it, access every single node, filter them, modify them.
它保存在浏览器的内存中，并直接链接到您在页面中看到的内容。 DOM具有一个API，可用于遍历，访问每个节点，对其进行过滤，对其进行修改。
The API is the familiar syntax you have likely seen many times, if you were not using the abstract API provided by jQuery and friends:
如果您未使用jQuery和朋友提供的抽象API，则该API是您可能多次看到的熟悉语法：
document.getElementById(id)document.getElementsByTagName(name)document.createElement(name)parentNode.appendChild(node)element.innerHTMLelement.style.leftelement.setAttribute()element.getAttribute()element.addEventListener()window.contentwindow.onloadwindow.dump()window.scrollTo()
React keeps a copy of the DOM representation, for what concerns the React rendering: the Virtual DOM
React保留了与React渲染有关的DOM表示形式的副本：虚拟DOM
Every time the DOM changes, the browser has to do two intensive operations: repaint (visual or content changes to an element that do not affect the layout and positioning relative to other elements) and reflow (recalculate the layout of a portion of the page - or the whole page layout).
每次DOM更改时，浏览器都必须执行两项密集的操作：重新绘制(对元素的视觉或内容更改不会影响相对于其他元素的布局和位置)和重排(重新计算页面一部分的布局-或整个页面的布局)。
React uses a Virtual DOM to help the browser use less resources when changes need to be done on a page.
当需要在页面上进行更改时，React使用虚拟DOM帮助浏览器使用更少的资源。
When you call setState() on a Component, specifying a state different than the previous one, React marks that Component as dirty. This is key: React only updates when a Component changes the state explicitly.
当您在Component上调用setState()时，指定一个不同于上一个状态的状态时，React将该Component标记为dirty 。 这很关键：React仅在组件显式更改状态时更新。
What happens next is:
接下来发生的是：
React updates the Virtual DOM relative to the components marked as dirty (with some additional checks, like triggering shouldComponentUpdate())
React会相对于标记为脏组件的组件更新Virtual DOM(进行一些其他检查，例如触发shouldComponentUpdate() )
The key thing is that React batches much of the changes and performs a unique update to the real DOM, by changing all the elements that need to be changed at the same time, so the repaint and reflow the browser must perform to render the changes are executed just once.
关键是React通过批量更改需要同时更改的所有元素来对很多更改进行批处理并对真实DOM执行唯一更新，因此浏览器必须执行的重新绘制和重排才能呈现更改。只执行一次。
翻译自:
虚拟dom
转载地址：http://ooqgb.baihongyu.com/