React中遍历两数组匹配渲染数据的性能优化问题

你的嵌套map写法确实存在性能隐患——时间复杂度为O(n*m)，当两个数组数据量变大时，重复循环会拖慢渲染效率。这里有几种更高效的实现方式：

方法一：利用Set快速查找（推荐） #

先把specificFilm转换成Set结构，将判断ID是否存在的操作复杂度从O(m)降到O(1)，之后只需遍历一次allGenres数组即可：

const specificFilmSet = new Set(specificFilm);

{allGenres
  .filter(genre => specificFilmSet.has(genre.id))
  .map(genre => <Chip key={genre.id} label={genre.name} />)
}

方法二：构建ID-名称映射表 #

如果需要频繁进行这类匹配操作，可以先把allGenres转成以ID为键的对象，再遍历specificFilm数组直接取值：

const genreMap = allGenres.reduce((map, genre) => {
  map[genre.id] = genre.name;
  return map;
}, {});

{specificFilm.map(id => (
  <Chip key={id} label={genreMap[id]} />
))}

原写法的性能问题根源 #

原代码中，每个流派都要完整遍历一遍specificFilm数组，哪怕已经找到匹配ID也会继续循环，不仅会生成多余的空字符串节点，还做了大量无用的比对操作。上面两种方法都能将时间复杂度降到O(n)或O(m)，大幅提升数据量大时的渲染性能。

内容的提问来源于stack exchange，提问作者evolutionx3