react 窗口 拖动_通过React窗口掌握

react 窗口 拖动

In the frontend development community, we tend to use the word performance quite a lot. We all have the common goal of having a performant application. Brian Vaughan developed react-window with this in mind and he did a great job of giving us a powerful tool to achieve this goal.

在前端开发社区中，我们倾向于大量使用performance一词。 我们都有一个高性能应用程序的共同目标。 Brian Vaughan考虑到这一点而开发了react-window ，他在为我们提供实现该目标的强大工具方面所做的出色工作。

React窗口背后的理论 (The Theory Behind react-window)

react-window in theory is very simple to understand, the window refers to the view the user can see.

react-window在理论上很容易理解，窗口是指用户可以看到的视图。

react-window will only render what the user can see, because why would we bother using resources rendering areas that the user can’t see? That would just be pure silliness!

react-window将仅呈现用户可以看到的内容，因为我们为什么要使用用户看不见的资源渲染区域呢？ 那简直是愚蠢！

让我们变得实用 (Let’s Get Practical)

Well wouldn’t it be very hard to profile an application, without an actual application? I have created an application that fetches a large list of movies, you can check out the repo here.

那么，没有实际的应用程序就很难对应用程序进行概要分析吗？ 我创建了一个应用程序，可以提取大量电影， 您可以在此处查看存储库 。

Just run an npm install and then npm start , you should now see the following on localhost:3000

只需运行npm install然后再npm start ，您现在应该在localhost:3000上看到以下内容

初始测量 (Initial Measurements)

The following code in movie-list.js will get5000 movies from our large response:

movie-list.js的以下代码将从我们的大型响应中获得5000部电影：

const moviesList = movies.slice(0, 5000);

We’ll use 5000 as our sample size as it’s quite chunky and will take some time to render.

我们将使用5000作为样本大小，因为它相当庞大，并且需要花费一些时间进行渲染。

We’ll start by measuring our initial performance, the first thing we’ll measure is our frame per second (FPS). To enable this in Chrome DevTools, you need to turn on rendering by clicking more tools then rendering.

我们将从测量初始性能开始，首先要测量的是每秒帧数( FPS )。 要在Chrome DevTools中启用此功能，您需要先单击更多工具，然后再渲染以打开渲染。

Our Frame Rate is at 34.0 fps which is quite slow, we are more looking for achieving something around 60fps.

我们的Frame Rate 34.0 fps ，这是相当慢的，我们正在寻求达到60fps左右的速度。

The next thing we’ll measure is our First Meaningful Paint. To do this I ran a Lighthouse report, this couldn’t handle the 5000 movies so just for this test I moved the number of movies to 500

接下来要测量的是“ First Meaningful Paint 。 为此，我运行了Lighthouse报告，该报告无法处理5000部电影，因此仅针对此测试，我将电影数移至500

As you can see from the above, the performance is not good and remember this is with 500 movies, not 5000.

从上面可以看到，性能不好，请记住这是500部电影，而不是5000部电影。

实施React窗口 (Implementing react-window)

I will be making all the performance upgrades on a new branch called performance-increased, this means when you clone the repo you will have the slow application on the master branch and you can toggle between both to see the difference.

我将在一个名为performance-increased的新分支上进行所有性能升级，这意味着克隆克隆仓库时， master分支上的应用程序运行缓慢，您可以在两者之间切换以查看差异。

To implement react-window, you first need to install it by running npm install react-window, then import FixedSizeList.

要实现react-window ，您首先需要通过运行npm install react-window ，然后导入FixedSizeList 。

import { FixedSizeList as List } from 'react-window';

创建行 (Creating a Row)

To work with the List component, we need to create a Row component like so:

要使用List组件，我们需要创建一个Row组件，如下所示：

// all props are passed by the List component
const Row = ({ index, style, data }) => {
  const movie = data[index];
  // style is passed by the List component to give our Row the correct dimensions
  return (
    <div style={style} key={index}>
      <Movie key={index} {...movie} />
    </div>
  );
};

We won’t go into the Movie component as it doesn’t matter, basically it’s our view for each movie.

我们不会进入“ Movie组件，因为这无关紧要，基本上，这是每部电影的视图。

AutoSizer组件 (AutoSizer Component)

With our Row component created, we can then implement our List component which we wrap in an AutoSizer component:

创建Row组件后，我们可以实现List组件，并将其包装在AutoSizer组件中：

<AutoSizer>
  {({ height, width }) => (
    <List
      className="List"
      height={height}
      itemCount={1000}
      itemSize={150}
      width={width}
      itemData={moviesList}
    >
      {Row}
    </List>
  )}
</AutoSizer>

The AutoSizer component will automatically scale our Row component’s dimensions to it’s container by passing a height and width to our List component. You can also just pass static values to the height and width prop.

通过将height和width传递给List组件， AutoSizer组件将自动将Row组件的尺寸缩放到其容器。 您也可以将静态值传递给height和width属性。

To install AutoSizer, run npm install react-virtualized-auto-sizer then to import:

要安装AutoSizer ，请运行npm install react-virtualized-auto-sizer然后导入：

import AutoSizer from 'react-virtualized-auto-sizer';

列表组件 (List Component)

The List component is quite simple, as you can see we have a prop called itemData which we pass all of our 5000 movies This allows us to access an individual movie in our Row component.

List组件非常简单，如您所见，我们有一个名为itemData的道具，该道具传递了我们所有的5000部电影。这使我们可以访问Row组件中的单个电影。

const movie = data[index];

The itemSize prop is the height of each row. The rest of the props are quite simple.

itemSize是每行的高度。 其余的道具很简单。

The List component passes a style and index prop to our Row component by default

默认情况下，List组件将style和index属性传递给我们的Row组件

Now with everything in place, let’s check out our FPS meter. This time it is much closer to our goal of 60fps.

现在一切就绪，让我们检查一下我们的FPS仪表。 这次更接近我们的60fps目标。

If you have cloned the repo and compared the two branches, you will also see just how much quicker the initial render is. To prove this, let’s run another audit.

如果克隆了仓库并比较了两个分支，则还将看到初始渲染的速度有多快。 为了证明这一点，让我们运行另一个审核。

Initially we scored 63 in our performance, but now we have scored 100. Our First Meaningful Paint took only 1.1s, compared to 4.8s without react-window. Also remember that this audit was ran against 5000 movies, not the 500 the initial audit was ran on.

最初，我们的表现得分为63 ，但是现在我们的得分为100 。 与没有react-window 1.1s相比，我们的“ First Meaningful Paint 1.1s First Meaningful Paint仅1.1s了4.8s 。 还请记住，这次审核针对的是5000部电影，而不是最初审核的500部电影。

结语 (Wrapping Up)

You can see from the above just how powerful react-window is. Our application was a very simple one but we can still see great performance benefits. I hope you have learned something from this article and are closer to achieving your performance goals.

从上面可以看到react-window功能多么强大。 我们的应用程序非常简单，但是仍然可以看到巨大的性能优势。 我希望您从本文中学到了一些知识，并且更接近实现您的性能目标。

翻译自: https://www.digitalocean.com/community/tutorials/react-react-window

react 窗口 拖动