Как реализовать отложенную загрузку или загрузку при прокрутке в React - PullRequest
Новая
       14

Как реализовать отложенную загрузку или загрузку при прокрутке в React

0 голосов
/ 20 марта 2020

Здравствуйте, у меня есть список объектов, которые я хочу реализовать для этого списка с отложенной загрузкой или загрузкой при прокрутке, поскольку его длинный список и каждый объект загружаются, что делает приложение очень медленным, чтобы вывести их из списка одним выстрелом

код 

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>

)

1 Ответ

0 голосов
/ 20 марта 2020

Передача только первой, например, 20 дорожек на компонент TrackList. Когда вы прокрутите до конца списка, пропустите первый и второй пакет из 20 треков и т. Д. c. таким образом, «добавляя» (не совсем точный термин) элементы в список.

Если ваш список огромен, а производительность имеет решающее значение, используйте response-virtualized .

...