Javascript 如何仅在数组的特定索引处渲染一次。自然反应

所以本质上，我的问题源于试图解决这个问题

function SwiperComponent () {

  const [item, setItems] = useState([["hi",console.log("hi")], ["hello",console.log("hello")], ["never",console.log("never")], ["sorry",console.log("sorry")]])
  const swiperItems = item.map(ite => {
    return(
        <View style={styles.slide1} >
          <Text style={styles.text}>{ite[0] + ite[1]}</Text>
        </View>
    )
  })
    return (
        <Swiper
            key={item.length}
            style={styles.slide1}
        >
          {swiperItems}
        </Swiper>
    )

}

函数SwipComponent（）{
const[item，setItems]=useState（[[“嗨”，console.log（“嗨”）]，[“你好”，console.log（“你好”），[“从来没有”，console.log（“从来没有”），[“对不起”，console.log（“对不起”）]）
const swipperItems=item.map（ite=>{
返回(
{ite[0]+ite[1]}
)
})
返回(
{swipperitems}
)
}

因此，我的代码相当简单，我使用React Native Swiper库，基本上使数组中的视图可切换

现在的问题是，当我运行代码时，它会同时生成数组中的所有视图，我知道这一点，因为我可以在控制台中看到，打印语句都是在启动时打印的。由此产生的问题是，如果我有一个很长的图片数组，我不想一次检索所有这些图片，因为这会降低性能，但很明显，用户很有可能不会浏览所有图片，在这种情况下，我会调用我的服务器检索不必要的图片（我使用的是firebase，因此我试图限制这一成本问题）

---

那么，在我开始刷卡之后，我如何才能在靠近这些图像时渲染它们呢？

您应该能够使用react native swiper中的

LoadMinimum

设置

在这里，您需要通过设置

loadMinimalSize

来指定

loadMinimal

为真，以及在当前幻灯片前后需要加载的幻灯片数量

<Swiper
  key={item.length}
  style={styles.slide1}
  loadMinimal={true} // only loads the current page + [loadMinimalSize] amount of pages before and after
  loadMinimalSize={0}
  loadMinimalLoader={() => (
    <View>
      <Text>Loading</Text>
    </View>
  )} // optional loader to show while page loads
>
  {swiperItems}
</Swiper>

(
加载
)}//页面加载时显示的可选加载程序
>
{swipperitems}

---

或者，您可以使用延迟加载图像库，该库仅在您在阈值范围内滚动时加载图像。

控制台。log

返回

未定义的

，因此我不太明白您在这里试图做什么？对于渐进加载，React Native Swiper文档中有一个。老实说，仔细考虑后可能只是后端的问题。Prolly与react无关，我仍然保留此帖子，以防在前端以某种方式解决此问题。为我的愚蠢感到抱歉，我是一个初学者。谢谢Emile，我会研究它！