React -优化JSX元素的渲染数组

Question

我使用React 17.0.2，我有一个性能问题，我如何渲染包含大量JSX元素的数组(它可能从100到~650个元素不等)。

特别地，我想在一个可滚动的容器中显示一定数量的不同"卡片"。其中每一个包含一个图表，图像，图标和段落。每次SSE发送新数据时，这些详细信息都会更改。

下面的代码工作得很好，做了我期望它做的事情，但是渲染很慢。我正在开发的应用程序也应该在手机上使用，我担心等待时间对用户来说有点太长了。

参赛者:

const Contestants = memo(() => {
return (
<div className={`${'contestants-container animate__animated animate__fadeIn'} ${classes.mainContainer}`}>
<div className={`${'mx-0 my-0'} ${classes.cardsContainer}`}>
<PerfectScrollbar>
<div className='d-flex flex-wrap align-items-center justify-content-evenly' >
<DetailCards />
</div>
</PerfectScrollbar>
</div>
</div>    
)
})
export default Contestants

DetailCards

const DetailCards = memo(() => {
// ** Context
const fetchDataContext = useContext(FetchDataContext)
const vehicleData = fetchDataContext.vehicleData
const locationData = fetchDataContext.locationData
const payloadSSE = fetchDataContext.payloadSSE
// ** State
const [detailCardsArray, setDetailCardsArray] = useState([])
const [initialLocationFlag, setInitialLocationFlag] = useState(true)
const [initialLocationData, setInitialLocationData] = useState({})
const detailCardsArrayRef = useRef(detailCardsArray)

useEffect(() => {
if (detailCardsArray) {
detailCardsArrayRef.current = detailCardsArray
}
}, [detailCardsArray])
useEffect(() => {
setInitialLocationFlag(true)
}, [])
useEffect(() => {
if (initialLocationFlag === true && Object.keys(locationData).length !== 0) {
setInitialLocationData(locationData)
setInitialLocationFlag(false)
}
}, [locationData, initialLocationFlag])
useEffect(() => {
if (Object.keys(vehicleData).length !== 0 && Object.keys(initialLocationData).length !== 0) {
let temporaryDetailCardsArray = []
for (let i = 0; i < Object.keys(vehicleData).length; i++) {
temporaryDetailCardsArray.push(
<DetailCard 
key={vehicleData[Object.keys(vehicleData)[i]].imei} 
object1={vehicleData[Object.keys(vehicleData)[i]]} 
object2={initialLocationData[Object.keys(vehicleData)[i]]} 
/>
)
}
setDetailCardsArray(temporaryDetailCardsArray)
}
}, [vehicleData, initialLocationData])
useEffect(() => {
if (detailCardsArrayRef.current.length !== 0) {
if (typeof payloadSSE !== 'undefined' && payloadSSE !== null) {
for (let i = 0; i < detailCardsArrayRef.current.length; i++) {
if (detailCardsArrayRef.current[i].key === payloadSSE.imei) {
detailCardsArrayRef.current[i] = (
<DetailCard 
key={detailCardsArrayRef.current[i].key} 
object1={detailCardsArrayRef.current[i].props.object1} 
object2={payloadSSE} 
/>
)         
}
}
}
setDetailCardsArray(detailCardsArrayRef.current) 
}
}, [payloadSSE])

return detailCardsArray
})
export default DetailCards

所以，有没有一种方法来渲染数组更快?我考虑过虚拟化，但我不确定如何实现它。

谢谢!

Answer 1

这个问题通过使用@Piotr Żak建议来获取一定数量的元素并给用户提供加载更多元素的选项来解决。此外，我还添加了分页。现在它在手机上也能正常工作。