Mongo数组处理：单个对象循环vs数组存对象循环哪个更优？

从Mongo获取了包含8个对象的数组，但当前页面仅需展示前2个对象，纠结两种实现方案哪种更优：

• 截取前2个对象存入数组状态，用map()循环渲染
• 将两个对象分别存入单独的状态变量，编写两个独立的div渲染

想了解哪种方案更好，或者有没有更简便的方法，尤其考虑对象体积较大的情况。

相关代码：

const [data, setData]=useState([])
const [obj1, setObj1]=useState({})
const [obj2, setObj2]=useState({})

const fetchData = async () => {
 const x = []

 const res = await axios('/api/getTeam/SVK_CZ')
 const mongo = res.data
 console.log(mongo)   // (8) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
 x.push(mongo[0])
 x.push(mongo[1])
 setData(x)    // 得到包含2个对象的数组，可使用map()

// 或者

 setObj1(mongo[0])
 setObj2(mongo[1])  // 无法循环，必须写两个div渲染
                   // 当前对象体积小，但不确定大对象场景下的表现
}

毫无疑问选第一种方案（数组+map渲染），理由如下：

• 可维护性拉满：要是以后需求变了要展示3个甚至更多对象，数组方案只改下截取长度就行，渲染逻辑完全不用动；而单独存变量的方案得新增状态、复制粘贴渲染代码，越改越冗余。
• 性能没差别：哪怕对象体积大，两种方案都是存两个对象的引用，内存占用一模一样。React渲染时，map()生成元素和手动写两个div的性能开销基本一致，不会有明显差距。
• 代码更简洁：数组方案状态管理更集中，渲染只用一段循环代码，不用重复写相似的div结构，减少冗余。

还有个更省心的优化方法：不用单独存截取后的数组，直接在渲染时处理原始数据就行。比如把完整的Mongo数组存在状态里，渲染时直接取前2个：

// 存储完整的返回数据
const [fullData, setFullData] = useState([])

const fetchData = async () => {
 const res = await axios('/api/getTeam/SVK_CZ')
 setFullData(res.data)
}

// 渲染阶段按需截取并循环
return (
  <div>
    {fullData.slice(0, 2).map((item, index) => (
      <div key={index}>{/* 这里渲染每个对象的内容 */}</div>
    ))}
  </div>
)

这样连截取数组的步骤都省了，状态只存完整数据，后续调整展示数量也更灵活。

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