怎么在React的大列表中，实现一个元素一个元素的按顺序更新？

Question

我们公司是做阅读类软件的，现在用React遇到一个问题，就是如果一个列表中图书较多的话，比如100本书，使用一个组件以For循环的方式创建每一个图书文件，如图所示，就会非常卡。因为整个渲染过程占用了main进程，导致程序不能响应。

我们发现很多手机APP，会实现类似下面的效果，首先渲染一个占位的图片，然后再按顺序，一个一个渲染出真实的数据。我们猜测在React中也可以通过这种方式。
比如我们刚开始出来，就渲染100个空的div，如图所示；然后再每个200毫秒渲染一个真实的图书信息，如下图所示，最后，经过几次渲染，形成如上图所示的效果。最好可以做到，只有用户看到的那些块儿，才会渲染真实的数据。

请问，这个React能做吗？有没有相应的库可以使用？
多谢各位。

Answer 1

可以试试多线程Worker，GPU（e.g:GPU.js和Canvas）或者react-virtualized长列表加速的方案。

Answer 2

用懒加载呗，当在可视范围内再加载图片

Answer 3

个人建议：

1. 做滚动渲染，如下：

用户的电脑/手机，屏幕一次性能看到的数据量是有限的，你可以根据 监控页面滚动事件，然后根据滚动条的高度+视区的高度，按需一行一行的加载数据。示例代码：

// 这里只是伪代码
let fullData = []; 需要渲染的全部图书
state = {
  data:[], // 当前需要渲染的图书
}

onScroll(){
  // 避免不必要的调用，这里可以加个 多少时间能只触发一次的，控制；
  pushData(height);
}

pushData(height){
   let divH = 200;// 这里动态获取dom的高度
   if(divH<height){
     let d = fullData.pop();
     this.setData({
        data:[...this.state.data,d];
     })
   }
}

ok，上面的代码只是个思路示例；

1. 将图片的信息的渲染放到事件队列里面去，这个东西和你自己说的一样
2. 将图片的host，修改和自己主host不一样，这样可以提供渲染速度，同时还能不 block 你其他资源加载

最后：

1. 这个case和 react 没多大关系，所以解决问题的出发点不能 是react
2. react里面（现在前端框架都是的），用到的数据驱动，比一起的jquery 更容易让我们解决这样的问题