三、注意事项
对于简单列表渲染而言，不使用key比使用key的性能，例如：
将一个[1,2,3,4,5]，渲染成如下的样子：
<div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div>
后续更改成[1,3,2,5,4]，使用key与不使用key作用如下：
1.加key <div key='1'>1</div> <div key='1'>1</div> <div key='2'>2</div> <div key='3'>3</div> <div key='3'>3</div> ========> <div key='2'>2</div> <div key='4'>4</div> <div key='5'>5</div> <div key='5'>5</div> <div key='4'>4</div> 操作：节点2移动至下标为2的位置，节点4移动至下标为4的位置。 2.不加key <div>1</div> <div>1</div> <div>2</div> <div>3</div> <div>3</div> ========> <div>2</div> <div>4</div> <div>5</div> <div>5</div> <div>4</div> 操作：修改第1个到第5个节点的innerText
如果我们对这个集合进行增删的操作改成[1,3,2,5,6]
1.加key <div key='1'>1</div> <div key='1'>1</div> <div key='2'>2</div> <div key='3'>3</div> <div key='3'>3</div> ========> <div key='2'>2</div> <div key='4'>4</div> <div key='5'>5</div> <div key='5'>5</div> <div key='6'>6</div> 操作：节点2移动至下标为2的位置，新增节点6至下标为4的位置，删除节点4。 2.不加key <div>1</div> <div>1</div> <div>2</div> <div>3</div> <div>3</div> ========> <div>2</div> <div>4</div> <div>5</div> <div>5</div> <div>6</div> 操作：修改第1个到第5个节点的innerText
由于dom节点的移动操作开销是比较昂贵的，没有key的情况下要比有key的性能更好
总结
总的来说Diff算法通过key和tag来对节点进行取舍，可直接将复杂的比对拦截掉，然后降级成节点的移动和增删这样比较简单的操作。
对oldFiber和新的ReactElement节点的比对，将会生成新的fiber节点，同时标记上effectTag，这些fiber会被连到workInProgress树中，作为新的WIP节点。
