React系列一：react中提升性能和阅读观感的细节

本文链接：https://blog.csdn.net/qq_41862017/article/details/96479909

本文介绍了React性能优化的三个实用技巧：使用Fragment替代div减少DOM数量；在构造函数中绑定this提高性能；避免在map循环中使用index作为key值。这些技巧能够帮助开发者提升React应用的效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近在公司负责的项目从Vue转到了React，于是这一个月沉迷React无法自拔....好吧，这不是不写博客的理由，感觉两个月不写整个人都不好了呢。那今天就说说我了解的React提升性能的细节点吧，并且这篇博客会在之后不断更新完善。

一、用Fragment代替div

众所周知，在react的render函数中返回一个组件时，如果有多个JSX标签，则需要用一个父标签包裹住，这有点类似于vue的template语法中上来就要一个div进行包裹，但我们知道创建无用的dom是浪费一丢丢性能的，而且打包之后在浏览器中发现全部都是空的div标签也不好看。这时候我们可以使用React给我们的Fragment，这样打包出来的东西就不会显现出没有属性的div，用法就是先从react中引用，再包裹你所写的内容就可以。

二、将bind(this)放在constructor()中可以节约性能

bind(this)在组件初始化时调用，绑定在此处的作用域，这是最合理的做法，如果将bind写到render函数中，state更新时会重复绑定作用域，会影响性能。

三、map遍历循环时key不要用index

因为react的diff算法，直接用index时的性能会劣于用item的性能。什么是diff算法呢？就是react中组件数据改变时react为了定位是哪一个标签或者子组件改变了，和之前的组件对比所用的算法，后期我会深入研究后专门写一篇相关博客。map遍历循环时里面的每一项是由key用来定位的，举个例子，如果我们在第3的位置添入一项，如果我们使用index作为key，那后面的index全部打乱，后面就都要重新渲染，如果我们直接用map(item => {...})中的item作为key,则只是在第3的位置加入一项，大大提升性能。