AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

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

2024-10-13 36
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 【简单粗暴】如何使用 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
}

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

文章标签：
前端开发
JavaScript
BI
API
JSON
关键词：
React Native优化
React Native性能
React Native优化性能
何雨晨
目录
相关文章
那年春天
|
1月前
|
存储 缓存 JavaScript
如何优化React或Vue应用的性能
需要注意的是，性能优化是一个持续的过程，需要根据具体的应用场景和性能问题进行针对性的优化。同时，不同的项目和团队可能有不同的优化重点和方法，要结合实际情况灵活运用这些优化策略，以达到最佳的性能效果。
那年春天
112 51
夏天49597
|
20天前
|
前端开发 UED 开发者
React 选项卡组件 Tabs：从基础到优化
本文详细介绍了如何在React中构建一个功能丰富的选项卡组件，包括基础实现、样式美化、常见问题及解决方法。通过逐步讲解，从简单的选项卡组件结构开始，逐步引入样式、性能优化、动态内容加载、键盘导航支持和动画效果，最后讨论了自定义样式的实现。旨在帮助开发者在React项目中高效构建高质量的选项卡组件。
夏天49597
60 18
夏天49597
|
25天前
|
前端开发 UED
React 文本区域组件 Textarea：深入解析与优化
本文介绍了 React 中 Textarea 组件的基础用法、常见问题及优化方法，包括状态绑定、初始值设置、样式自定义、性能优化和跨浏览器兼容性处理，并提供了代码案例。
夏天49597
52 8
那年春天
|
1月前
|
监控 JavaScript 前端开发
如何在实际应用中测试和比较React和Vue的性能？
总之，通过多种方法的综合运用，可以相对客观地比较 React 和 Vue 在实际应用中的性能表现，为项目的选择和优化提供有力的依据。
那年春天
39 1
mao29955
|
1月前
|
JavaScript 前端开发 测试技术
React和Vue的性能对比如何？
需要注意的是，性能不仅仅取决于框架本身，还与开发者的代码质量、架构设计以及项目的优化程度等密切相关。因此，在评估性能时，应该综合考虑多个因素，而不是仅仅局限于框架之间的比较。
mao29955
137 1
html的七十二变
|
1月前
|
前端开发 JavaScript API
探究 React Hooks：如何利用全新 API 优化组件逻辑复用与状态管理
本文深入探讨React Hooks的使用方法，通过全新API优化组件逻辑复用和状态管理，提升开发效率和代码可维护性。
html的七十二变
46 2
跃@sir
|
1月前
|
JavaScript 前端开发 算法
在性能上,React和Vue有什么区别
【10月更文挑战第23天】在性能上,React和Vue有什么区别
跃@sir
21 1
Java时光
|
1月前
|
JavaScript 前端开发 开发者
JavaScript框架React vs. Vue：一场性能与易用性的较量
JavaScript框架React vs. Vue：一场性能与易用性的较量
Java时光
39 0
夏天49597
|
2月前
|
前端开发 JavaScript 算法
React 渲染优化策略
【10月更文挑战第6天】React 是一个高效的 JavaScript 库，用于构建用户界面。本文从基础概念出发，深入探讨了 React 渲染优化的常见问题及解决方法，包括不必要的渲染、大量子组件的渲染、高频事件处理和大量列表渲染等问题，并提供了代码示例，帮助开发者提升应用性能。
夏天49597
61 6
前端徐徐
|
2月前
|
缓存 前端开发 JavaScript
10 种方案提升你 React 应用的性能
本文首发于微信公众号「前端徐徐」，作者徐徐分享了提升 React 应用性能的方法。文章详细介绍了 `useMemo`、虚拟化长列表、`React.PureComponent`、缓存函数、使用 Reselect、Web Worker、懒加载、`React.memo`、`useCallback` 和 `shouldComponentUpdate` 等技术，通过实际案例和代码示例展示了如何优化 React 应用的性能。这些方法不仅减少了不必要的重新渲染和计算，还提升了应用的响应速度和用户体验。
前端徐徐
35 0