React Native Expo：优化大对象数组提取name至数组（替代低效map）

问题分析 #

你当前的实现存在核心性能问题：在map循环里逐个调用setCity，每一次调用都会触发组件的重渲染逻辑。当API返回的对象数组规模很大时，数百甚至数千次的状态更新和重渲染会累积出明显的耗时（比如你遇到的半分钟延迟）。

优化方案 #

先一次性完成所有name字段的提取，再调用一次状态更新函数：

.then(function (response) {
  // 一次性提取所有name字段，生成目标数组
  const cityNames = response.data.map(({ name }) => name);
  // 仅执行一次状态更新
  setCity(cityNames);
})

优化原理 #

1. 批量数据处理：通过一次map操作完成所有元素的字段提取，数组转换的性能开销是线性且最小的
2. 单次状态更新：只调用一次setCity，仅触发一次组件重渲染，彻底避免了多次状态更新带来的额外性能损耗

额外优化建议 #

如果返回的数组存在重复的name值，可以在提取后去重，进一步减少Dropdown组件的渲染压力：

const cityNames = [...new Set(response.data.map(({ name }) => name))];

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