React中响应式原理-虚拟DOM和DOM

React中响应式原理-虚拟DOM和DOM

1.当状态发生变化，React框架会自动根据新的状态重新构建UI，而开发者只需关注状态转移（数据）。
2.React框架在接收到用户状态改变通知后，会根据当前渲染树，结合最新的状态改变，通过Diff算法，计算出树中变化的部分，然后只更新变化的部分（DOM操作），从而避免整棵树重构，提高性能。状态变化后React框架并不会立即去计算并渲染DOM树的变化部分，相反，React会在DOM的基础上建立一个抽象层，即虚拟DOM树，对数据和状态所做的任何改动，都会被自动且高效的同步到虚拟DOM，最后再批量同步到真实DOM中，而不是每次改变都去操作一下DOM。

为什么不能每次改变都直接去操作DOM树？
这是因为在浏览器中每一次DOM操作都有可能引起浏览器的重绘或回流：

• 如果DOM只是外观风格发生变化，如颜色变化，会导致浏览器重绘界面。
• 如果DOM树的结构发生变化，如尺寸、布局、节点隐藏等导致，浏览器就需要回流（及重新排版布局）。
  而浏览器的重绘和回流都是比较昂贵的操作，如果每一次改变都直接对DOM进行操作，这会带来性能问题，而批量操作只会触发一次DOM更新。