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

Dear 丶 2022-11-27 04:28 159阅读 0赞

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][].

那么，没有实际的应用程序就很难对应用程序进行概要分析吗？ 我创建了一个应用程序，可以提取大量电影， [您可以在此处查看存储库][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 get`5000` 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][https_www.digitalocean.com_community_tutorials_react-react-window]

react 窗口 拖动

[you can check out the repo here]: https://github.com/alligatorio/react-window-tutorial
[https_www.digitalocean.com_community_tutorials_react-react-window]: https://www.digitalocean.com/community/tutorials/react-react-window