React/虚拟DOM

在说虚拟DOM之前，先来一个引子,从输入url到展现出整个页面都有哪些过程?

1、输入网址

2、DNS解析

3、建立tcp连接

4、客户端发送HTPP请求

5、服务器处理请求　

6、服务器响应请求

7、浏览器展示HTML

8、浏览器发送请求获取其他在HTML中的资源。

其中浏览器展示HTML经过了：构建DOM树，解析CSS构建CSSOM树，DOM与CSSOM结合成为RenderObject树，然后将RenderObject树渲染成页面（布局->重绘），这个过程是由渲染引擎做的，JavaScript引擎与渲染引擎是独立的，因为js可以操作dom，所以渲染引擎会暴露给js引擎一些接口来操作dom元素，这个通信过程的耗费是比较大的，所以在性能优化中会有一条：js尽量少操作dom元素，而虚拟DOM则是为了解决这一问题而出现。

当你用传统的源生api或jQuery去操作DOM时，浏览器会从构建DOM树开始从头到尾执行一遍流程。比如当你在一次操作时，需要更新10个DOM节点，理想状态是一次性构建完DOM树，再执行后续操作。但浏览器没这么智能，收到第一个更新DOM请求后，并不知道后续还有9次更新操作，因此会马上执行流程，最终执行10次流程。显然例如计算DOM节点的坐标值等都是白白浪费性能，可能这次计算完，紧接着的下一个DOM更新请求，这个节点的坐标值就变了，前面的一次计算是无用功。

虚拟DOM就是为了解决这个浏览器性能问题而被设计出来的。例如前面的例子，假如一次操作中有10次更新DOM的动作，虚拟DOM不会立即操作DOM，而是将这10次更新的diff内容保存到本地的一个js对象中，最终将这个js对象一次性attach到DOM树上，通知浏览器去执行绘制工作，这样可以避免大量的无谓的计算量。

什么是虚拟DOM？

Virtual DOM 是一种编程概念。在这个概念里， UI 以一种理想化的，或者说“虚拟的”表现形式被保存于内存中，并通过如 ReactDOM 等类库使之与“真实的” DOM 同步。这一过程叫做协调。

在某一时间节点调用 React 的 render() 方法，会创建一棵由 React 元素组成的树。在下一次 state 或 props 更新时，相同的 render() 方法会返回一棵不同的树。React 需要基于这两棵树之间的差别来判断如何有效率的更新 UI 以保证当前 UI 与最新的树保持同步。（Diffing算法）

这种方式赋予了 React 声明式的 API：您告诉 React 希望让 UI 是什么状态，React 就确保 DOM 匹配该状态。这使您可以从属性操作、事件处理和手动 DOM 更新这些在构建应用程序时必要的操作中解放出来。

如何创建虚拟dom

JSX就是在创建虚拟DOM，JSX就是React.createElement(component, props, ...children)的语法糖

<MyButton color="blue" shadowSize={2}>
  Click Me
</MyButton>

　会被babel转译成

React.createElement(
  MyButton,
  {color: 'blue', shadowSize: 2},
  'Click Me'
)

　React.createElement() 会预先执行一些检查，以帮助你编写无错代码，但实际上它创建了一个这样的对象：

// 注意：这是简化过的结构
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world!'
  }
};

　　也就是=》react元素

ReactDOM

ReactDOM.render  把虚拟dom转成真实dom，并且挂载

ReactDOM.render会返回对根组件 ReactComponent 实例的引用，但是目前应该避免使用返回的引用，在未来版本的 React 中，组件渲染在某些情况下可能会是异步的。 如果你真的需要获得对根组件 ReactComponent 实例的引用，那么推荐为根元素添加 callback ref。

 

当首次调用时，容器节点里的所有 DOM 元素都会被替换，后续的调用则会使用 React 的 DOM 差分算法（DOM diffing algorithm）进行高效的更新。

 

ReactDOM.render() 不会修改容器节点（只会修改容器的子节点）。