在学习 React 之初，在它的官方文档上，很容易会看到 Virtual DOM，并且文档中也会写着，React 不推荐操作真实 DOM。那么，你有想过这是为什么吗？
最开始，查了很多关于 React 的资料，了解了Virtual DOM 和DOM，然而并未能真正解答为什么 React 不推荐操作DOM？
最近偶然看到这样一句话，DOM 操作会引起浏览器对网页进行重新布局，重新绘制。
那么，浏览器的渲染机制又是什么呢？
如上图，浏览器的渲染机制可以归纳为四个步骤：
- 解析HTML以构建DOM树：渲染引擎开始解析HTML文档，转换树种的HTML标签或js生成的标签到DOM节点，它被称为——内容树。
- 构建渲染树：解析CSS（包括外部CSS文件和样式元素以及js生成的样式），根据CSS选择器计算出节点的样式，创建另一个树——渲染树。
- 布局渲染树：从根节点递归调用，计算每一个元素的大小、位置等，给每个节点所应该出现在屏幕上的精确坐标。
- 绘制渲染树：遍历渲染树，每个节点将使用UI后端层来绘制。
从图中可以看出 Repaint 和 Reflow 分别出现在了第三步和第四步。而在我们操作DOM的时候，就有可能引起页面结构或者页面展示的变化；页面结构的变化会触发 Reflow，页面展示的变化会触发 Repaint。
关于Reflow和Repaint，简单讲，你在操作DOM前截一次屏，操作之后再截一次屏，如果你两次截屏每个坐标上的东西一样，那么久不需要 Reflow；Repaint 发生更改时，元素的外观被改变，且在没有改变布局的情况下发生，如改变 outline，visibility，background color，不会影响DOM结构。
什么会引起Repaint？
- Change Visibility : hidden to visible
- Change background , border-color , color
- Elements skin changes visibility , but do not affect it’s layout
什么会引起Reflow？
- Resizing the window
- Changing the font
- Adding or removing a stylesheet
- Content changes, such as a user typing text in an input box
- Activation of CSS pseudo classes such as :hover (in IE the activation of the pseudo class of a sibling)
- Manipulating the class attribute
- A script manipulating the DOM
- Calculating offsetWidth and offsetHeight
- Setting a property of the style attribute
Reflow 都会引起 Repaint。
