react 分页_使用React构建自定义分页

react 分页

Often times, we get involved in building web apps in which we are required to fetch large sets of data records from a remote server, API or some database sitting somewhere. If you are building a payment system for example, it could be fetching thousands of transactions. If it is a social media app, it could be fetching tonnes of user comments, profiles or activities. Whichever it is, there are a couple of methods for handling the data such that it doesn't become overwhelming to the end-user interacting with the app.

通常，我们会参与构建Web应用程序，在这些应用程序中，我们需要从远程服务器，API或某个地方的某些数据库中获取大量数据记录。 例如，如果您要建立一个支付系统，它可能会获取数千笔交易。 如果它是社交媒体应用程序，则可能会获取大量用户评论，个人资料或活动。 无论是哪种方法，都有两种方法可以处理数据，以使数据不会被最终用户与应用程序进行交互所淹没。

One of the popular methods for handling large datasets on the view is by using the infinite scrolling technique - where more data is loaded in chunks as the user continues scrolling very close to the end of the page. This is the technique used in displaying search results in Google Images. It is also used in so many social media platforms like Facebook - displaying posts on timeline, Twitter - showing recent tweets, etc.

在视图上处理大型数据集的一种流行方法是使用无限滚动技术 -当用户继续滚动到页面末尾时，更多数据以块的形式加载。 这是用于在Google图片中显示搜索结果的技术。 它也用在许多社交媒体平台（如Facebook）中-在时间轴上显示帖子，在Twitter-显示最近的推文等。

Another known method for handling large datasets is using pagination. Pagination works effectively when you already know the size of the dataset(the total number of records in the dataset) upfront. Secondly, you only load the required chunk of data from the total dataset based on the end-users interaction with the pagination control. This is the technique used in displaying search results in Google Search.

处理大型数据集的另一种已知方法是使用分页 。 当您已经预先知道数据集的大小（数据集中的记录总数）时，分页有效。 其次，仅基于最终用户与分页控件的交互从总数据集中加载所需的数据块。 这是在Google搜索中显示搜索结果的技术。

In this tutorial, we will see how to build a custom pagination component with React for paginating large datasets. In order to keep things as simple as possible, we will build a paginated view of the countries in the world - of which we already have the data of all the countries upfront.

在本教程中，我们将看到如何使用React构建自定义的分页组件以对大型数据集进行分页。 为了使事情尽可能简单，我们将对世界各国进行分页查看-我们已经预先获取了所有国家的数据。

Here is a demo of what we will be building in this tutorial.

这是我们将在本教程中构建的演示。

先决条件 ( Prerequisites )

Before getting started, you need to ensure that you have Node already installed on your machine. I will also recommend that you install the Yarn package manager on your machine, since we will be using it for package management instead of npm that ships with Node. You can follow this Yarn installation guide to install yarn on your machine.

在开始之前，您需要确保计算机上已经安装了Node 。 我还将建议您在计算机上安装Yarn软件包管理器，因为我们将使用它来进行软件包管理，而不是Node附带的npm 。 您可以按照此纱线安装指南在机器上安装yarn 。

We will create the boilerplate code for our React app using the create-react-app command-line package. You also need to ensure that it is installed globally on your machine. If you are using npm >= 5.2 then you may not need to install create-react-app as a global dependency since we can use the npx command.

我们将使用create-react-app命令行软件包为React应用创建样板代码。 您还需要确保将其全局安装在您的计算机上。 如果您使用的是npm >= 5.2那么您可能不需要安装create-react-app作为全局依赖项，因为我们可以使用npx命令。

Finally, this tutorial assumes that you are already familiar with React. If that is not the case, you can check the React Documentation to learn more about React.

最后，本教程假定您已经熟悉React。 如果不是这种情况，可以查看React文档以了解有关React的更多信息。

入门 ( Getting Started )

创建新的应用程序 (Create new Application)

Start a new React application using the following command. You can name the application however you desire.

使用以下命令启动一个新的React应用程序。 您可以根据需要命名应用程序。

create-react-app react-pagination

npm >= 5.2

npm >= 5.2

If you are using npm version 5.2 or higher, it ships with an additional npx binary. Using the npx binary, you don't need to install create-react-app globally on your machine. You can start a new React application with this simple command:

如果您使用的是npm 5.2或更高版本，它将附带一个附加的npx二进制文件。 使用npx二进制文件，您无需在计算机上全局安装create-react-app 。 您可以使用以下简单命令启动新的React应用程序：

npx create-react-app react-pagination

npx create-react-app react-pagination

安装依赖项 (Install Dependencies)

Next, we will install the dependencies we need for our application. Run the following command to install the required dependencies.

接下来，我们将安装应用程序所需的依赖项。 运行以下命令以安装所需的依赖项。

yarn add bootstrap prop-types react-flags countries-api
yarn add -D npm-run-all node-sass-chokidar

We have installed node-sass-chokidar as a development dependency for our application to enable us use SASS. For more information about this, see this guide.

我们已将node-sass-chokidar安装为应用程序的开发依赖项，以使我们能够使用SASS。 有关此的更多信息，请参阅本指南 。

Now open the src directory and change the file extension of all the .css files to .scss. The required .css files will be compiled by node-sass-chokidar as we continue.

现在打开src目录，并将所有.css文件的文件扩展名更改为.scss 。 继续操作时，所需的.css文件将由node-sass-chokidar编译。

修改npm脚本 (Modify the npm Scripts)

Edit the package.json file and modify the scripts section to look like the following:

编辑package.json文件并修改scripts部分，使其如下所示：

"scripts" : {
  "start:js" : "react-scripts start" ,
  "build:js" : "react-scripts build" ,
  "start" : "npm-run-all -p watch:css start:js" ,
  "build" : "npm-run-all build:css build:js" ,
  "test" : "react-scripts test --env=jsdom" ,
  "eject" : "react-scripts eject" ,
  "build:css" : "node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/" ,
  "watch:css" : "npm run build:css && node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/ --watch --recursive"
}

包括Bootstrap CSS (Include Bootstrap CSS)

We installed the bootstrap package as a dependency for our application since we will be needing some default styling. We will also be using styles from the Bootstrap pagination component. To include Bootstrap in the application, edit the src/index.js file and add the following line before every other import statement.

我们将bootstrap软件包安装为应用程序的依赖项，因为我们将需要一些默认样式。 我们还将使用Bootstrap分页组件中的样式。 要将Bootstrap包含在应用程序中，请编辑src/index.js文件，并在所有其他import语句之前添加以下行。

import "bootstrap/dist/css/bootstrap.min.css" ;

设置标志图标 (Setup Flag Icons)

We installed react-flags as a dependency for our application. In order to get access to the flag icons from our application, we will need to copy the icon images to the public directory of our application. Run the following commands from your terminal to copy the flag icons.

我们安装了react-flags作为我们应用程序的依赖项。 为了从我们的应用程序访问标志图标，我们需要将图标图像复制到我们的应用程序的public目录中。 从终端运行以下命令以复制标志图标。

mkdir -p public/img
cp -R node_modules/react-flags/vendor/flags public/img

If you are on a Windows machine, run the following commands instead:

如果您使用的是Windows计算机，请改为运行以下命令：

mkdir \public\img
xcopy \node_modules\react-flags\vendor\flags \public\img /s /e

components目录 (The components directory)

We will create the following React components for our application.

我们将为我们的应用程序创建以下React组件。

• CountryCard - This simply renders the name, region and flag of a given country.

  CountryCard这只是呈现给定国家的名称，地区和标志。

• Pagination - This contains the whole logic for building, rendering and switching pages on the pagination control.

  Pagination -包含在分页控件上构建，呈现和切换页面的整个逻辑。

Go ahead and create a components directory inside the