Reactjs 如何在React中实现延迟加载或滚动加载

您好，我有一个对象列表，我想为这个列表实现延迟加载或滚动加载，因为它的长列表和每个对象都需要时间来加载，这使得应用程序一次列出它们的速度非常慢

代码

const TrackList = ({ classes, tracks }) => (
  <List>
    {tracks.map(track => (
      <ExpansionPanel key={track.id}>
        <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>
          <ListItem className={classes.root}>
            {/* <LikeTrack /> */}
            <ListItemText 
              primaryTypographyProps={{
                variant: "subheading",
                color: 'primary'
              }} 
              primary={track.title}
              // secondary={
              //   <Link 
              //       className={classes.link}
              //       to={`/profile/${track.postedBy.id}`}>
              //     {track.postedBy.username}
              //   </Link>
              // }
              />
              <AudioPlayer url={track.url}/>
          </ListItem>
        </ExpansionPanelSummary>
        <ExpansionPanelDetails>
          <Typography
            variant="body1">
              {track.description}
          </Typography>
        </ExpansionPanelDetails>
        {/* <ExpansionPanelActions>
          <UpdateTrack />
          <DeleteTrack />
        </ExpansionPanelActions> */}
      </ExpansionPanel>
    ))}
  </List>

)

const TrackList=（{classes，tracks}）=>(
{tracks.map（track=>(
{/*  */}
{track.description}
{/* 
*/}
))}
)

仅将前20个曲目传递给

曲目列表

组件。 当您滚动到列表底部时，以“附加”（这里的术语不太准确）的方式传递第一批和第二批20首曲目等

如果您的列表很大，并且性能至关重要，请使用