React中高效渲染指定ID列表元素的优化方案问询

针对大数据量场景，最优方案是利用Set的O(1)查找特性替代数组的O(n)查找，将整体时间复杂度从O(m*n)降到O(m+n)，大幅提升处理速度：

实现代码 #

const list1 = [2,3,5,7]
const list2 = [{id:1,name:'Ronaldo'},{id:2,name:'Johny Depp'},{id:3,name:'Mr.Bean'},{id:4,name:'Messi'},{id:5,name:'Jennifer Anniston'},{id:6,name:'Ted Mosby'},{id:7,name:'Regner'},{id:8,name:'Thor'}]

// 第一步：将list1转为Set，实现O(1)时间复杂度的查找
const idSet = new Set(list1);

// 第二步：遍历list2筛选符合条件的对象
const filteredList = list2.filter(item => idSet.has(item.id));

console.log(filteredList);

方案优势 #

• 时间复杂度最优：转换Set的时间是O(m)（m为list1长度），筛选遍历是O(n)（n为list2长度），总耗时为线性级，远优于直接用list1.includes(item.id)的O(m*n)复杂度（每判断一个元素都要遍历整个list1）。
• 内存占用可控：Set的内存开销远低于构建映射表（如Object），且对于数值类型的ID存储效率极高。

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