在前端开发社区中,我们倾向于使用性能这个词,我们都有一个共同的目标,即拥有一个高性能的应用程序。
反应窗口背后的理论
反应窗口在理论上是非常简单的理解,窗口是指用户可以看到的视图。
反應窗口只會顯示使用者可以看到的東西,因為為什麼我們要使用資源顯示使用者看不到的區域?這將是純粹的愚蠢!
让我们务实
好吧,如果没有实际应用程序,将应用程序配置起来会很困难吗?我已经创建了一个应用程序,收集了大量的电影清单, 你可以在这里查看复制片。
只需运行npm安装,然后npm启动,您现在应该在localhost:3000上看到以下内容
初步测量
movie-list.js中的以下代码将从我们的大响应中获得5000电影:
1const moviesList = movies.slice(0, 5000);
我们将使用5000作为我们的样本大小,因为它很小,需要一些时间来渲染。
我们将通过测量我们的初始性能开始,我们首先测量的是我们每秒的(‘FPS’)。
我们的Frame Rate是34.0fps,这是相当缓慢的,我们更希望实现60fps左右的东西。
接下来我们将测量的是我们的第一个有意义的油漆。为了做到这一点,我运行了一份灯塔报告,这不能处理5000电影,所以只是为了这个测试,我把电影的数量转移到500
正如你从上面可以看到的那样,表现并不好,请记住,这与500电影有关,而不是5000。
应用 React-Window
我将对一个名为性能增强的新分支进行所有性能升级,这意味着当你克隆复制器时,你将对主分支进行缓慢的应用,你可以切换两者之间看到差异。
要实现react-window,您需要先通过运行npm install react-window来安装它,然后导入FixedSizeList。
1import { FixedSizeList as List } from 'react-window';
创建一个线
要使用列表组件,我们需要创建这样的原始组件:
1// all props are passed by the List component
2const Row = ({ index, style, data }) => {
3 const movie = data[index];
4 // style is passed by the List component to give our Row the correct dimensions
5 return (
6 <div style={style} key={index}>
7 <Movie key={index} {...movie} />
8 </div>
9 );
10};
我们不会进入电影组成部分,因为这并不重要,基本上这就是我们对每部电影的看法。
汽车组件
随着我们的原始组件的创建,我们可以实施我们的列表组件,我们将其包装成一个AutoSizer组件:
1<AutoSizer>
2 {({ height, width }) => (
3 <List
4 className="List"
5 height={height}
6 itemCount={1000}
7 itemSize={150}
8 width={width}
9 itemData={moviesList}
10 >
11 {Row}
12 </List>
13 )}
14</AutoSizer>
AutoSizer组件将自动将我们的Row组件的尺寸扩展到其容器,通过将高度和宽度传递给我们的列表组件。
要安装AutoSizer,运行npm install react-virtualized-auto-sizer,然后导入:
1import AutoSizer from 'react-virtualized-auto-sizer';
列表组件
列表组件非常简单,正如你可以看到的,我们有一个名为itemData的插件,我们通过我们的所有5000电影,这让我们可以在我们的原始组件中访问一个单独的电影。
1const movie = data[index];
itemSize是每个行的高度,其余的是相当简单的。
<$>[注] 列表组件默认情况下将风格和索引插件传递给我们的原始组件 <$>
现在一切都好了,让我们看看我们的FPS计数器,这次它更接近我们的60fps目标。
如果你克隆了复制品,并比较了这两个分支,你也会看到初始渲染速度有多快。
起初,我们在我们的表演中得到了63,但现在我们得到了100。我们的第一个有意义的绘画只有1.1s,而不是4.8s没有反响窗口。
包装上
您可以从上面看到反应窗口有多强大。我们的应用程序非常简单,但我们仍然可以看到伟大的性能效益。