React在构建高性能前端应用时有哪些最佳实践？

本文共计1603个文字，预计阅读时间需要7分钟。

目录 + 算法策略 + 单点diffing + 数组diffing + 使用key值的要求 + 算法策略 + React的调和算法，主要发生在render阶段，调和算法并非一个特定的函数，而是在调和过程中，为提升构建效率

目录

• 算法策略
• 单节点diffing
• 数组节点diffing
• key值的使用要求

算法策略

React的调和算法，主要发生在render阶段，调和算法并不是一个特定的算法函数，而是指在调和过程中，为提高构建workInProcess树的性能，以及Dom树更新的性能，而采用的一种策略，又称diffing算法。 在React 的官网上描述“Diffing” 算法时，提到了“diffing two trees”，但是在源码实现时，并不是创建好两棵树后，再从上往下的diffing这两棵树。这个diffing发生在搭建子节点时, 实际是新生成的ReactElement 与 current树上fibe节点的diffing。 为了将diffing算法的时间复杂度控制在O(n)（树diff的时间复杂度涉及到树的编辑距离，可以看这里）, 采用了如下策略：

只比较同层级的节点，（貌似这一点没有在官网中提到）

对于单节点比较，如果当前节点type 和 key 不相同，不再比较其下子节点，直接删掉该节点及其下整棵子树，根据ReactElement重新生成节点树。因为React认为不同类型的组件生成的树形结构不一样，不必复用。

如果子节点是数组，可根据唯一的key值定位节点进行比较，这样即使子节点顺序发生变化，也可以根据key值进行复用。