Key的优化
我们在遍历列表时，总是会提示一个警告，让我们加入一个key属性。这和我们修改数据后React的重新渲染有关系。
1.情况一：在最后位置插入数据
- 这种情况，有无key意义不大。
2.情况二：在前面插入数据
- 这种情况，在没有key的情况下，所有的li都需要进行修改。
3.当子元素（这里以li为例子）拥有key时，React使用key来匹配原有树上的子元素以及最新树上的子元素
- 如果原来树上有元素A，B，C，D，新数则是将新元素E插入B和C之间，新树元素为A，B，E，C，D，在li拥有key的情况下(这里将元素的名称作为它们的key)，key为C和D的元素仅仅只是进行位移，不需要进行任何其他的修改，然后将key为E的元素插入到C元素前面的位置即可。
- 如果li没有key，则从B元素开始，后面的所有li都需要进行修改。
4.key的注意事项
- key应该是唯一的
- key不要使用随机数（随机数在下一次render时，会重新生成一个数字，导致新旧树在匹配key的时候无法对应上）
- 使用index作为key，对性能时没有优化的
5.React对diff算法进行优化，将其优化成了O(n)
- 同层节点之间相互比较，不会跨节点比较
- 不同类型的节点，产生不同的树结构
- 开发时，可以通过key来指定哪些节点在不同的渲染下保持稳定
SCU优化
通过shouldComponentUpdate，在shouldComponentUpdate这生命周期中判断当前的state和props是否和更新后的state和props是否发生改变，来决定是否要调用render函数进行更新重新渲染。
以index作为key，删除是删除最后一个
2024.7.22
react使用map生成的元素，key的设定不对导致每次删除都删除最后一个。假设 你的key设置为map中的索引，假设为0，1，2（原dom树），现在你用splice删除掉1，重新渲染时，还是会按map索引按顺序渲染为0，1（新dom树），由于react渲染机制是比较的key值，发现key（0，1）都没变，所以保留原dom树的0，1元素（包括里面内容都不变），而由于数量少了一个，渲染的最后一个就没有渲染，就感觉是删除的最后一个。
主要是比较不同的是通过key进行对比，如果key是index，删除后重新渲染后index顺序是保持不变的，只有数量是可能发生改变，所有key通过对比后，前面的一直都没问题，只有到最后没有新的虚拟DOM的index相对于旧的虚拟DOM的index少了，所以相对于之前的DOM树就少渲染一个元素，看起来就像是删除了最后一个元素。
