在当前的Web开发时代，Web应用程序面临着各种问题。虽然前端框架或前端解决方案百花齐放，但并不是所有问题都能完美解决。由于Web应用是基于浏览器渲染接口的，并且由于浏览器瓶颈的限制，当大量数据需要渲染成DOM时，往往会运行得非常慢。传统的做法大多是给用户展示一个加载屏蔽层，或者类似分页的加载，但显然有时候并不能解决所有问题。长时间的加载显示甚至可能给用户带来不美观的体验。结合以上问题，出现了一些比较优雅的解决方案，虚拟加载！
我对虚拟化的理解：我认为虚拟化并不是一项新技术，它只是解决海量数据渲染问题的一种方式。我们知道浏览器本身可以给用户展示一个巨大的界面，他看不到成千上万的数据渲染出来的所有页面。于是出现了一种在用户可见范围内渲染页面的技术，只有在用户需要看到的时候才会渲染出来。也就是说，原来的渲染是一次性的，现在是分步进行的，很好的解决了接口问题。这里有两个React组件框架来解决这样的问题。
React虚拟化React虚拟化是一个开源的React虚拟化组件。你可以在Github上得到它。可以高效的呈现大型列表和表格数据，Github上的星数已经达到了16k。显然是很多人认可的React虚拟加载解决方案，并没有停止维护：
React-windowreact-window可以说是完全重写的React虚拟化。与react虚拟化相比，它是一个更轻量级的解决方案，没有太多不必要的功能。它与react虚拟化一脉相承，作者本人也建议使用react-window。因为添加了react虚拟化的项目在构建后会增加35kb的项目规模，而react-windows只会增加不到2kb，所以react-window是轻量级的，更适合初学者！同样，作者在Github上开源！
体验我们先简单的通过动图来体验react虚拟化和react-window，但具体效果不如自己去官网体验！
react virtualized：
或者分散非线性数据渲染
数据网格的UI比较规整。
列表
砌体布局
windows使用的滚动条
数据表
建议直接去demo查看生成的代码。
react-window:
从“React”导入React；\ n从\'react-dom\ '导入ReactDOM\ n从“react-window”导入{ fixed size List as List }；import \ '/styles . CSS \ 'const Row=({ index，style })=(\ n div class name={ index % 2？\ ' ListItemOdd \ '\ ' ListItemEven \ ' } style={ style } \ n Row { index } \ n/div \ n)；\ n const Example=()=(\ n List \ n class name=' List ' \ n height={ 150 } \ n item count={ 1000 } \ n item size={ 35 } \ n width=' 360 px 'height='auto' /
document . getelementbyid(\ ' root \ ')；
如何选择？至于如何选择，其实笔者已经有了建议。建议如果原项目已经使用react虚拟化，应该继续使用。如果是新项目或者没有使用react虚拟化，应该选择react-window。总的来说可以满足大部分应用场景！
总结一下Web开发中遇到的一系列问题，无论是自己造轮子(前提条件充分)，还是找第三方解决方案，都是软件开发中遇到的常见问题，但最终的结果都是为了项目的正常进行或如期完成。选择正确的解决方案是最重要的！
渲染开发是做什么的啊
视频是网上搜集的，海哥写的，视频里有介绍。本视频主要用于学习交流，版权归原作者所有。