React渲染机制

React的渲染机制首先是Jsx文件转换成虚拟DOM，再由虚拟DOM转换成真实DOM

那么当React项目中数据发生变化时，页面会有哪些变化呢？

1. React在props或state发生改变时，会调用React的render方法，会创建一棵不同的DOM树；

2. React需要基于这两棵不同的DOM树之间的差别来判断如何有效的更新UI（diff算法）；

3. 最后React将最终的DOM树渲染成真实DOM

diff算法

一棵DOM树参考另外一棵DOM树进行完全比较更新，那么即使是最先进的算法，该算法的复杂程度为 O(n³)，其中 n 是树中元素的数量；

如果在React项目中使用了该算法，那么展示 1000 个元素所需要执行的计算量将在十亿的量级范围；这个开销太过昂贵了，React的更新性能会变得非常低效；

如何有效的去使用diff算法呢？

1. 同层DOM节点之间相互比较，不会垮节点比较；
2. 不同类型的节点，产生不同的树结构；
3. 开发中，可以通过key来指定哪些节点在不同的渲染下保持稳定；

key优化

我们在遍历数组列表，总是会收到一个警告，让我们来添加一个key属性

key值是作为节点的一个标识符，并且key是唯一不可变，这样可以极大优化diff算法中不必要的性能消耗

key的注意事项：

1. key应该是唯一的；
2. key不要使用随机数（随机数在下一次render时，会重新生成一个数字）；
3. 使用index作为key，对性能是没有优化的；

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 1 天，点击查看活动详情