什么是Virtual DOM
Virtual DOM只是真实Dom的副本，它不是Javascript的标准概念，更像是专门为了React设计的概念，可以称之为Virtual React DOM。它是一个节点树， 每个节点存储了对应节点的部分信息并且实现了React interfaces。部分与React相关的API也会存储在Fiber结构中，因此Fibers是Virtual DOM的组成部分。
节点树主要是为了服务于Diff算法，最小化页面更新，提升性能。
- 刷新页面（比如通过setState）
- 生成节点树
- Diff 算法
- 计算出minimal render operation
- render ( to DOM, iOS, or Android)
以上第一步到第四步均属于reconciler，第五步属于renderer
Diff Algorithm
React 如何使本该是 O(n3)的计算优化成O(n)
- 首先检查同级节点类型，如果节点类型发生改变，直接全部重新生成， 而且销毁之前的节点，之前的节点组件及其所有子组件componentWillUnmount触发, 新组件及其所有子组件UNSAFE_componentWillMount ,componentDidMount相继触发
- 如果节点类型相同，检查节点属性，仅更新发生改变的节点
- 如果子节点是list，默认情况下(没有 key)，React会按序比较两个列表，比如，列表末尾插入，React仅插入一个节点，若列表头插入，React会修改所有节点。
- 如果子节点是list，并且存在key，React在比较列表是，不会按序比较，而且类似比较key-element。
Element List with Index Key
日常开发时，有的小伙伴会使用index作为key，这是不太好的习惯，主要是因为两点：
- 如上所说，使用index作为key，list一旦重排（中间插入，末尾插入，中间删除，混序）皆会导致不必要的其他list item的更新，耗费性能
- 对于一组uncontrolled input list，加入顺序发生变化，但两个list实际上看不出差别，因此React不会更新，那么页面上显示的input顺序也不会更新 demo
