react性能调谐与diff算法
一个页面其实就相当于是一颗dom树，里面有很多它的子节点，然后你每次去操作一个事件，它都会生成一个虚拟dom，它会跟上一个虚拟dom进行比对，这里运用的算法叫做diff算法，当它找到需要改变的组件的时候，就会让他重新渲染，因为在html中，dom树的重新渲染它是需要花费很长时间的
前提
在任意一个时刻，react中的render创建一颗元素树（element tree），当一个状态（state）变迁或者属性（props）更新， render将会返回一颗不同的元素树。react接下来将会计算出如何高效的根据最新的元素树更新UI。
react的更新算法，基于以下假设：
- 两个不同类型（type）的元素产出不同树。
- 开发者可以通过为子元素添加key属性，标示该元素在不同render之间是保持稳定不变的。
算法
比较两棵树的时候，react首先比较两棵树的根节点，会有如下几种情况：
不同类型的元素
销毁原来的树，创建新树。
销毁时，原来的Dom节点会被删除，component instance触发componentWillUnmount事件，创建新树时，新的Dom节点会插入到Dom树中， component instance会先后触发componentWillMount、componentDidMount。
根节点下的其他组件也会unmounted。例如：
<div>
<Counter />
</div>
<span>
<Counter />
</span>
将会删除Counter，同时remount一个新的Counter。
相同类型的Dom元素
此时react检查两个Dom元素的属性，仅仅更新改变的属性，但是底层Dom节点是不变的。例如：
<div className="before" title="stuff" />
<div className="after" title="stuff" />
此时仅仅会更改底层Dom节点的className属性。
相同类型的Component元素
当一个组件更新时，组件实例保持不变，所以它的状态得以在不同render之间保持。react用新的元素（Element）更新底层组件实例的属性（props）， 并且调用实例的componentWillReceiveProps和componentWillUpdate事件方法。
然后调用render。然后这个diff算法会根据之前的结果（prevRenderedElement）与现在的结果（nextRenderedElement）递归调用。
关于性能
当在Dom节点的children上递归调用的时候，默认的情况React仅仅同时迭代两棵树，当预见不同的时候就产生一个改变。 这对于如下情况，没有问题：
<ul>
<li>first</li>
<li>second</li>
</ul>
<ul>
<li>first</li>
<li>second</li>
<li>third</li>
</ul>
react只会插入一个节点。
但是对于如下情况：
<ul>
<li>Duke</li>
<li>Villanova</li>
</ul>
<ul>
<li>Connecticut</li>
<li>Duke</li>
<li>Villanova</li>
</ul>
它会修改1、2两个li的text，然后插入一个li，这显然不是我们想要的，我们当然希望仅仅插入一个节点就可以了。 react需要找到一种方式，让我们在两次render之间，可以通过保持一些不变的东西，让他通过这个值去对比。
react通过key属性来表示。当children拥有keys的时候，react使用这些key来比较原始元素树与最新元素树。如下：
<ul>
<li key="2015">Duke</li>
<li key="2016">Villanova</li>
</ul>
<ul>
<li key="2014">Connecticut</li>
<li key="2015">Duke</li>
<li key="2016">Villanova</li>
</ul>
这样的话react就知道拿key值相同的进行比较，如此以来，发现仅仅添加了一个元素，就解决了我们的性能问题。
key的取值
我们需要保证key值在兄弟节点中是唯一的。通常按照如下步骤去选择key：
- model的id
- 添加一个唯一的id到model上
- 使用index（如果不reorder的话）
性能原则
因为react的diff算法基于的那两个假设，如果你的程序不遵从它或者偏离它，就可能出现性能问题。
- 此算法针对不同类型的component，会remount。所以当你发现两个component拥有极其类似的输出时，公用他们（只有一个类型）。
- key应该稳定（stable）、可预测（predicable）、唯一（unique）。不稳定的key会导致许多组件实例与Dom节点重复创建。
https://www.zhihu.com/question/29504639------如何理解虚拟dom
