React Virtual Dom & Diff Algorit

什么是Virtual DOM

Virtual DOM只是真实Dom的副本，它不是Javascript的标准概念，更像是专门为了React设计的概念，可以称之为Virtual React DOM。它是一个节点树， 每个节点存储了对应节点的部分信息并且实现了React interfaces。部分与React相关的API也会存储在Fiber结构中，因此Fibers是Virtual DOM的组成部分。
节点树主要是为了服务于Diff算法，最小化页面更新，提升性能。

1. 刷新页面（比如通过setState）
2. 生成节点树
3. Diff 算法
4. 计算出minimal render operation
5. render ( to DOM, iOS, or Android)
   以上第一步到第四步均属于reconciler，第五步属于renderer

Diff Algorithm

React 如何使本该是 O(n³)的计算优化成O(n)

1. 首先检查同级节点类型，如果节点类型发生改变，直接全部重新生成， 而且销毁之前的节点，之前的节点组件及其所有子组件componentWillUnmount触发, 新组件及其所有子组件UNSAFE_componentWillMount ,componentDidMount相继触发
2. 如果节点类型相同，检查节点属性，仅更新发生改变的节点
3. 如果子节点是list，默认情况下(没有 key)，React会按序比较两个列表，比如，列表末尾插入，React仅插入一个节点，若列表头插入，React会修改所有节点。
4. 如果子节点是list，并且存在key，React在比较列表是，不会按序比较，而且类似比较key-element。

Element List with Index Key

日常开发时，有的小伙伴会使用index作为key，这是不太好的习惯，主要是因为两点：

1. 如上所说，使用index作为key，list一旦重排（中间插入，末尾插入，中间删除，混序）皆会导致不必要的其他list item的更新，耗费性能
2. 对于一组uncontrolled input list，加入顺序发生变化，但两个list实际上看不出差别，因此React不会更新，那么页面上显示的input顺序也不会更新 demo