【简单粗暴】如何使用 React 优化 AG 网格性能

简介: 【简单粗暴】如何使用 React 优化 AG 网格性能

AG Grid 是一个功能丰富的 JavaScript 库,主要用于在 Web 应用程序中构建强大的数据表。它被近 90% 的财富 500 强公司使用,在商业智能 (BI) 应用程序和金融科技应用程序中特别有用。

React 是用于构建企业 Web 和移动应用程序的 JavaScript 库的市场领导者。它被大公司广泛采用,并拥有庞大的社区。

在本文中,我们将设置一个 React Web 应用程序,并使用 AG Grid 来构建一个高性能的数据表。本文中的所有代码都可在此 GitHub 链接中找到。

先决条件

Node.js 和 npm 已安装在您的系统上。

了解 JavaScript 和 React。

设置新的 React 应用程序

验证是否已安装 NodeJS 和 NPM。要检查的命令:和node -vnpm -v

我们将使用“创建 react app”来启动一个新的 React 应用程序,让我们使用npm install -g create-react-app

使用创建一个新的 React 应用程序npx create-react-app AGGridReact

等待应用程序完全创建,然后使用转到新创建的应用程序的文件夹cd AGGridReact

使用 启动应用程序。很快,您将能够使用 URL 在 localhost 端口 3000 上访问此 react 应用程序npm start

现在我们准备对我们的 React 应用程序进行修改。你可以使用你选择的代码编辑器,我用过Visual Studio Code。

将 AG Grid 集成到我们的 React 应用程序中

AG Grid 有两种版本,社区版和企业版。我们将使用社区版本,不会产生任何许可费用。企业版在大型公司中是首选,因为它提供了一组附加功能。

使用以下命令安装具有 React 支持的 AG Grid 社区版本npm install ag-grid-react

让我们在项目的 src 文件夹下创建两个文件夹:components 和 services。

让我们在 services 文件夹下创建一个服务。该服务将承担与后端通信并获取数据的工作。为简单起见,我们将不执行实际的 API 调用,而是提供一个包含所有示例数据的 JSON 文件。

让我们从这里创建文件并向其添加内容。movie-data.json

添加到 services 文件夹。我们的服务将有两种方法和一种导出的常量。很快,所有这些都将变得有意义。下面是此文件的参考代码。movie-service.js

JavaScript的

1
import movies from './movie-data.json';
2


3
const DEFAULT_PAGE_SIZE = 5;
4


5
const countOfMovies = async() => {
6
    return movies.movies.length;
7
};
8


9
const fetchMovies = async() => {
10
    return movies.movies;
11
};
12


13
export { DEFAULT_PAGE_SIZE, countOfMovies, fetchMovies };

在这一点上,让我们创建我们的 React 组件,它将保存 AG Grid Table。在 src 目录下的 components 文件夹下添加文件。AGGridTable.js

让我们在组件中导入 React 和 AG Grid,并制定基本的组件导出

JavaScript的

1
import React, { useState, useEffect } from 'react';
2
import { AgGridReact } from 'ag-grid-react';
3
import 'ag-grid-community/styles/ag-grid.css';
4
import 'ag-grid-community/styles/ag-theme-quartz.css';
5
export const AgGridTable = () => {}

我们将使用该组件来渲染我们的表,该组件需要两个主要内容:AGGridReact

我们希望在表格中显示的列。

我们希望在表中显示的行。

我们必须传递一个名为 our 的参数,以告诉它我们希望如何设置我们的列。如果您查看我们的文件中的电影数据,我们有列 、 和 。让我们将这些映射到我们的列定义参数。我们可以使用以下代码行来实现它。columnDefsAGGridReactmovie-data.jsonmovieIDmovieNamereleaseYear

JavaScript的

1
    const columnDefs = [
2
        { field: 'movieId', headerName: "Movie ID", minWidth: 100 },
3
        { field: 'movieName', headerName: "Movie Name", flex: 1 },
4
        { field: 'releaseYear', headerName: "Release Year", flex: 1 }
5
    ];

我们需要获取实际的电影数据,我们将利用我们的电影服务中的功能。此外,我们希望在页面加载时加载它。这可以通过传递一个空的依赖数组来实现 React 的钩子。fetchMoviesuseEffect

JavaScript的

1
    useEffect(() => {
2
        const fetchCount = async () => {
3
            const totalCount = await countOfMovies();
4
            setTotalRecords(totalCount);
5
        }
6
        fetchCount();
7
    }, []);
8


9
    useEffect(() => {
10
        fetchData();
11
    }, []);
12


13
    const fetchData = async () => {
14
        setIsLoading(true);
15
        try {
16
            const response = await fetchMovies();
17
            setMovieData(response);
18
        } catch (error) {
19
            console.error(error);
20
        } finally {
21
            setIsLoading(false);
22
        }
23
    };

让我们添加一些漂亮的加载指示符变量,以向我们的用户指示正在处理某些内容。

JavaScript的

1
 const [isLoading, setIsLoading] = useState(false);




把所有东西放在一起,我们得到我们的组件,如下所示。
JavaScript的
1
import React, { useState, useEffect } from 'react';
2
import { AgGridReact } from 'ag-grid-react';
3
import 'ag-grid-community/styles/ag-grid.css';
4
import 'ag-grid-community/styles/ag-theme-quartz.css';
5


6
import { countOfMovies, fetchMovies } from '../services/movie-service';
7


8
export const AgGridTable = () => {
9
    const [movieData, setMovieData] = useState([]);
10
    const [totalRecords, setTotalRecords] = useState(0);
11
    const [isLoading, setIsLoading] = useState(false);
12


13
    const columnDefs = [
14
        { field: 'movieId', headerName: "Movie ID", minWidth: 100 },
15
        { field: 'movieName', headerName: "Movie Name", flex: 1 },
16
        { field: 'releaseYear', headerName: "Release Year", flex: 1 }
17
    ];
18


19
    useEffect(() => {
20
        const fetchCount = async () => {
21
            const totalCount = await countOfMovies();
22
            setTotalRecords(totalCount);
23
        }
24
        fetchCount();
25
    }, []);
26


27
    useEffect(() => {
28
        fetchData();
29
    }, []);
30


31
    const fetchData = async () => {
32
        setIsLoading(true);
33
        try {
34
            const response = await fetchMovies();
35
            setMovieData(response);
36
        } catch (error) {
37
            console.error(error);
38
        } finally {
39
            setIsLoading(false);
40
        }
41
    };
42


43
    return (
44
        <>
45
            {isLoading && <div>Loading...</div>}
46


47
            <div
48
                className="ag-theme-quartz"
49
                style={{ height: 300, minHeight: 300 }}
50
            >
51
                {
52
                    totalRecords > 0 &&
53
                    <AgGridReact
54
                        rowData={movieData}
55
                        columnDefs={columnDefs}
56
                    />
57
                }
58


59
            </div>
60
        </>
61
    )
62
}

让我们更新我们的app.js以包含我们新构建的组件,并执行清理以删除基本的创建 React 应用生成的代码。以下是 app.js 的更新代码:

JavaScript的

1
import './App.css';
2
import { AgGridTable } from './components/AgGridTable';
3


4
function App() {
5
  return (
6
    <div className="App">
7
      <header className="App-header">
8
        <h1>Welcome logged in user.</h1>
9
      </header>
10
      <AgGridTable></AgGridTable>
11
    </div>
12
  );
13
}
14


15
export default App;
16

我们的表格现在应该加载到 UI 上了。

通过分页提高性能

到目前为止,我们一直在一次性呈现表中的所有行。这种方法在现实世界中无法扩展。想象一下,我们有 10000 行而不是 100 行,我们的页面会非常慢,UI 性能会受到巨大打击。

我们可以通过对数据进行分页来轻松增强这一点。简单来说,分页意味着将我们的数据分解为一组 x 个项目,并一次显示一个设置项目。

添加分页的一些主要好处是:

减小了 DOM 大小,从而优化了内存使用

提高渲染速度

增强的滚动性能

更新速度更快

让我们向设置中添加其他参数以启用分页。AGGridReact

pagination = true告诉 AG Grid 我们想要分页

paginationPageSize告诉 AG Grid 最初在页面上显示的默认项目数是多少。

我们将向参数传递一个数组。它将定义我们允许用户选择的不同页面大小。paginationPageSizeSelector

totalRows告诉 AG Grid 总共有多少条记录,这反过来又有助于计算我们表中的页数。

为了获得上述所有参数的正确值,我们需要更新代码以获取总行数并定义页面大小选择器数组。

JavaScript的

1
import React, { useState, useEffect, useMemo } from 'react';
2
import { AgGridReact } from 'ag-grid-react';
3
import 'ag-grid-community/styles/ag-grid.css';
4
import 'ag-grid-community/styles/ag-theme-quartz.css';
5


6
import { DEFAULT_PAGE_SIZE, countOfMovies, fetchMovies } from '../services/movie-service';
7


8
export const AgGridTable = () => {
9
    const [movieData, setMovieData] = useState([]);
10
    const [totalRecords, setTotalRecords] = useState(0);
11
    const [isLoading, setIsLoading] = useState(false);
12


13
    const columnDefs = [
14
        { field: 'movieId', headerName: "Movie ID", minWidth: 100 },
15
        { field: 'movieName', headerName: "Movie Name", flex: 1 },
16
        { field: 'releaseYear', headerName: "Release Year", flex: 1 }
17
    ];
18


19
    useEffect(() => {
20
        const fetchCount = async () => {
21
            const totalCount = await countOfMovies();
22
            setTotalRecords(totalCount);
23
        }
24
        fetchCount();
25
    }, []);
26


27
    useEffect(() => {
28
        fetchData();
29
    }, []);
30


31
    const fetchData = async () => {
32
        setIsLoading(true);
33
        try {
34
            const response = await fetchMovies();
35
            setMovieData(response);
36
        } catch (error) {
37
            console.error(error);
38
        } finally {
39
            setIsLoading(false);
40
        }
41
    };
42


43
    const paginationPageSizeSelector = useMemo(() => {
44
        return [5, 10, 20];
45
    }, []);
46


47
    return (
48
        <>
49
            {isLoading && <div>Loading...</div>}
50


51
            <div
52
                className="ag-theme-quartz"
53
                style={{ height: 300, minHeight: 300 }}
54
            >
55
                {
56
                    totalRecords > 0 &&
57
                    <AgGridReact
58
                        rowData={movieData}
59
                        columnDefs={columnDefs}
60
                        pagination={true}
61
                        paginationPageSize={DEFAULT_PAGE_SIZE}
62
                        paginationPageSizeSelector={paginationPageSizeSelector}
63
                        totalRows={totalRecords}
64
                    />
65
                }
66


67
            </div>
68
        </>
69
    )
70
}

有了这段代码,我们将在其中内置了漂亮的分页,并具有默认的页面大小。

目录
相关文章
|
17天前
|
前端开发 JavaScript 算法
React 渲染优化策略
【10月更文挑战第6天】React 是一个高效的 JavaScript 库,用于构建用户界面。本文从基础概念出发,深入探讨了 React 渲染优化的常见问题及解决方法,包括不必要的渲染、大量子组件的渲染、高频事件处理和大量列表渲染等问题,并提供了代码示例,帮助开发者提升应用性能。
44 6
|
15天前
|
缓存 前端开发 JavaScript
10 种方案提升你 React 应用的性能
本文首发于微信公众号「前端徐徐」,作者徐徐分享了提升 React 应用性能的方法。文章详细介绍了 `useMemo`、虚拟化长列表、`React.PureComponent`、缓存函数、使用 Reselect、Web Worker、懒加载、`React.memo`、`useCallback` 和 `shouldComponentUpdate` 等技术,通过实际案例和代码示例展示了如何优化 React 应用的性能。这些方法不仅减少了不必要的重新渲染和计算,还提升了应用的响应速度和用户体验。
16 0
|
3月前
|
前端开发 JavaScript 大数据
React与Web Workers:开启前端多线程时代的钥匙——深入探索计算密集型任务的优化策略与最佳实践
【8月更文挑战第31天】随着Web应用复杂性的提升,单线程JavaScript已难以胜任高计算量任务。Web Workers通过多线程编程解决了这一问题,使耗时任务独立运行而不阻塞主线程。结合React的组件化与虚拟DOM优势,可将大数据处理等任务交由Web Workers完成,确保UI流畅。最佳实践包括定义清晰接口、加强错误处理及合理评估任务特性。这一结合不仅提升了用户体验,更为前端开发带来多线程时代的全新可能。
57 1
|
3月前
|
前端开发 UED 开发者
React组件优化全攻略:深度解析让你的前端应用飞速运行的秘诀——从PureComponent到React.memo的彻底性能比较
【8月更文挑战第31天】在构建现代Web应用时,性能是提升用户体验的关键因素。React作为主流前端库,其组件优化尤为重要。本文深入探讨了React组件优化策略,包括使用`PureComponent`、`React.memo`及避免不必要的渲染等方法,帮助开发者显著提升应用性能。通过实践案例对比优化前后效果,不仅提高了页面渲染速度,还增强了用户体验。优化React组件是每个开发者必须关注的重点。
61 0
|
3月前
|
前端开发 UED 开发者
React.lazy()与Suspense:实现按需加载的动态组件——深入理解代码分割、提升首屏速度和优化用户体验的关键技术
【8月更文挑战第31天】在现代Web应用中,性能优化至关重要,特别是减少首屏加载时间和提升用户交互体验。React.lazy()和Suspense组件提供了一种优雅的解决方案,允许按需加载组件,仅在需要渲染时加载相应代码块,从而加快页面展示速度。Suspense组件在组件加载期间显示备选内容,确保了平滑的加载过渡。
106 0
|
3月前
|
缓存 前端开发 JavaScript
深入探索优化React应用程序的策略
【8月更文挑战第20天】
38 0
|
5月前
|
缓存 前端开发 JavaScript
如何对 React 函数式组件进行优化
如何对 React 函数式组件进行优化
|
6月前
|
前端开发 开发者
React useMemo钩子指南:优化计算性能
React useMemo钩子指南:优化计算性能
|
6月前
|
前端开发
掌握React中的useCallback:优化性能的秘诀
掌握React中的useCallback:优化性能的秘诀
|
6月前
|
前端开发 JavaScript API
blog-engine-07-gatsby 建极速网站和应用程序 基于React的最佳框架,具备性能、可扩展性和安全性。
探索多种博客引擎:Jekyll, Hugo, Hexo, Pelican, Gatsby, VuePress, Nuxt.js 和 Middleman。了解Gatsby,基于React的静态站点生成器,以其特性如React基础、静态生成、广泛插件支持、简便部署和现代开发流程脱颖而出。安装Gatsby需先安装Node.js,然后通过`gatsby-cli`创建新站点。开发涉及编写页面、本地开发、生成静态文件及部署。尽管Gatsby具有现代化和高性能优势,但也存在学习曲线和配置复杂性的挑战。