Question

我想一次渲染一个视频缩略图，以便改善网站的性能。

我尝试使用地图，但是地图一次遍历所有项目并返回要渲染的组件列表

我也尝试过使用while循环，但是while循环仅呈现一个缩略图（第一个缩略图）

这是我的渲染方法

render(){
        const { videos } = this.state;
        const listVideos = () => {
            let vids = videos
            let loopedAllVids = false;
            while(!loopedAllVids){
                const head = R.head(vids); // returns first item
                const { thumbnail } = head;
                vids = R.tail(vids); // returns all items but first item
                if(vids.length === 0){
                    loopedAllVids = true;
                }
                return(
                    <div 
                      className='video' 
                      style={{background:`url(${thumbnail})`}}>
                    </div>
                )
            }
        }
        return(
            <div  className="row text-center">
                <div className="col-md-12 header">
                    <h1> My Youtube Videos </h1>
                </div>
                <div className="col-md-12">
                    <div className="row">
                        <div className="col-md-8 col-xs-12 col-md-offset-2 videos">
                            {videos.length> 0 && listVideos()}
                        </div>
                    </div>
                </div>
            </div>
        )
    }

Answer 1

while方法仅返回一个大拇指，因为“ return”语句停止了while循环，并且map方法在迭代第一个数组之后返回了一个新数组。

无论如何，我认为这不是实现目标的正确方法。我认为最好将拇指存储在组件状态下，并使其一个拇指增加一个（可能使用“ setTimeout”方法）。

另一种方法是查看已经存在的“延迟加载”解决方案（例如https://github.com/twobin/react-lazyload）。

Answer 2

其他人已经解释了while循环的问题，因此我不再赘述。

如果您希望在给定时间仅呈现列表的子集，则需要实现分页。不过，您仍然可以使用map来渲染该子集。

对于分页，可以使用slice：

const videos = [
  {id: 0},
  {id: 1},
  {id: 2},
  {id: 3},
  {id: 4},
  {id: 5},
  {id: 6},
  {id: 7},
  {id: 8},
  {id: 9}
];

slice(0, 3, videos);  // 0, 1, 2
slice(3, 6, videos);  // 3, 4, 5
slice(6, 9, videos);  // 6, 7, 8
slice(9, 12, videos); // 9

我还将（按照其他人的建议）将视频的呈现提取到一个单独的函数中。

这是渲染一个缩略图的功能。它接受视频对象，但将其分解为仅包含所需的对象：

const renderThumbnail = ({thumbnail}) => (
  <div class="video" style={{background: url(`${thumbnail}`)}}></div>
);

这是一个接受要呈现的视频列表的函数：

const renderThumbnails = map(renderThumbnail);

这是您可以在render函数中使用它的方式：

render() {
  // videoIndex, displayCount: assuming you have implemented pagination somehow
  const { videos, videoIndex, displayCount } = this.state;
  return (
      <div  className="row text-center">
          <div className="col-md-12 header">
              <h1> My Youtube Videos </h1>
          </div>
          <div className="col-md-12">
              <div className="row">
                  <div className="col-md-8 col-xs-12 col-md-offset-2 videos">
                      {videos.length > 0 && renderThumbnails(slice(videoIndex, videoIndex + displayCount, videos))}
                  </div>
              </div>
          </div>
      </div>
  )
}

Answer 3

return语句中断while循环，您应该将函数移到render函数之外。

listVideos = (videos) => {

  let vids = videos
  let loopedAllVids = false;

  const videosToRender = []

  while(!loopedAllVids){

    const head = R.head(vids); // returns first item
    const { thumbnail } = head;

    vids = R.tail(vids); // returns all items but first item

    if(vids.length === 0){
       loopedAllVids = true;
    }

    videosToRender.push(
      <div 
         className='video' 
         style={{background:`url(${thumbnail})`}}>
       </div>
      )
    }

    return videosToRender;
}

render() {

  const { videos } = this.state;
  return(
      <div  className="row text-center">
          <div className="col-md-12 header">
              <h1> My Youtube Videos </h1>
          </div>
          <div className="col-md-12">
              <div className="row">
                  <div className="col-md-8 col-xs-12 col-md-offset-2 videos">
                      {videos.length > 0 && this.listVideos(videos)}
                  </div>
              </div>
          </div>
      </div>
  )

}

如何在响应中一一呈现列表中的项目？

3 个答案: