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

【问题标题】：React - Optimize rendering array of JSX elementsReact - 优化 JSX 元素的渲染数组
【发布时间】：2021-12-07 04:36:11
【问题描述】：

我正在使用 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

那么，有没有办法更快地渲染数组？我考虑过虚拟化，但不确定如何实现它。

谢谢！

【问题讨论】：

嘿 Wanda - 尝试延迟加载或只获取前 25 个元素并为用户提供选项 - 加载更多。
jmperezperez.com/high-performance-lazy-loading

标签： arrays reactjs optimization

【解决方案1】：

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

【讨论】：