React Virtual DOM

React的Virtual DOM应该是它最广为人知晓的特性了，那React的Virtual DOM是怎么样个存在，我瞎总结了下，是一个三个层次的两层映射关系：
Data ( State，Props ) => React elements => Host ( DOM / Native )

层次1 Data ( State，Props )

这个好理解，就是大家在写程序时处理的这些数据。众所周知，React从组件树的角度把数据拆分成了state和props。我们这里暂且把它们都叫做Data。

层次2 React elements

概括的说，React elements是React用来描述组件树的数据结构，用普通的object构成。组件树中的每一个节点，可能是自定义组件，也可能是DOM节点。都统一用React elements的数据结构来描述。
那么React elements和JSX是什么关系，其实就是一个东西。严格的来说的化，JavaScirpt plain object和JSX是React elements的两种描述方式，React elements是实质，是内容，plain object和JSX是表现。JSX用和html接近的方式，使得在代码中能更表象的描述界面，plain object则用来和代码实现做连接，两者之间通过转移来完成转换。
读读官方解释应该就能很好的理解它了。

层次3 Host ( DOM / Native )

第三个层次就是实际的显示操作。这个都知道React是多目标，所以React一般把这个称为Host，DOM是其中的一种。

映射1 Data => React elements

这一映射就是通过类组件的中render或函数组件中间的返回值来实现。通常大家用JSX，那么在render中返回的JSX就是React elements了。

映射2 React elements => Host ( DOM / Native )

React会根据React elements描述的页面结构，去进行必要的DOM操作，从而修改显示内容。React在这里做了大量的优化工作，能比较改变前后的React elemnts的不同，只进行不同之处所必要的DOM操作，从而优化性能。

优化

知道了上面的原理，说说性能优化，其实也是在这两个映射上做功夫。

映射1 Data => Reacts elements

这层优化的核心点是用好React提供的shouldComponents和PureComponents，尽可能用高效的方式，判断数据是否变化，避免不必要的render。如果不render，那个第二层的映射就不会发生，从而优化性能。判断数据变化的核心方式是使数据immutable化，能用浅比较的方式判断数据变化。

映射2 React elements => DOM

做好这一个步多少要知道一些实现原理，比如说

1. key在列表中作用，那么一定要用key
2. type变化对重新建立树的影响，那么尽可能保持组件树的稳定性就会有作用，尤其是在高处的节点，保持type的稳定性，避免大片子节点被重建，就显得很重要。