ReactJS - 性能优化

上一页
下一页

React 内部处理应用程序的性能并在每次机会上进行优化。作为开发人员，我们可以做一些事情来获得应用程序的最大性能。在本章中，让我们了解一些从 React 库中获得最大性能的技术。

性能优化技术

以下是其中一些性能优化技术：

使用生产版本 - React 有两种模式，开发模式和生产模式。开发模式是为开发人员准备的，开发模式为开发人员提供了许多有用的功能，以便更好地了解应用程序内部并调试应用程序。这会降低应用程序速度。为了获得最大性能，启用生产模式并部署应用程序。

CDN 使用 cdn 链接 React 库的应用程序应使用 React 库的生产版本，如下所示：

<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>

Create React App - 使用 create-react-app CLI 创建的应用程序可以使用以下命令创建应用程序的生产版本。

npm run build

Brunch - 使用 brunch 的应用程序应安装 terser-brunch 插件，然后调用生产版本以获得高效且高性能的代码。

npm install --save-dev terser-brunch
brunch build -p

Rollup - 使用 rollup 的应用程序应安装 commonjs、replace 和 terser 插件并进行配置以获得最佳生产版本。

npm install --save-dev rollup-plugin-commonjs rollup-plugin-replace rollup-plugin-terser

使用 React Devtools - React 为所有浏览器提供开发工具作为扩展。安装扩展程序后，浏览器的开发者工具部分将显示一个专门用于 React 的部分。React 扩展程序提供的工具之一是 Profiler（React DevTool Profiler）。在将应用程序部署到生产环境之前，可以对其进行分析和优化。

窗口技术 - 如果要在前端显示的数据量很大，则应用程序的性能会立即受到影响。一种方法是通过分页和其他类似技术仅显示一小部分数据。如果这些技术不可行，React 建议使用窗口技术，它会自动一次渲染一小部分数据。我们将在本章后面学习如何应用窗口技术。

避免协调 (shouldComponentUpdate) - 协调是一种强大的技术，可以提高 React 应用程序的性能。尽管如此，协调仍然需要一些时间来运行并在我们的应用程序中应用它。跳过渲染（以及随后的协调）将提高性能。React 提供了一个 API，shouldComponentUpdate，以提示 React 核心是否跳过或继续渲染。以下代码将跳过应用程序的渲染

shouldComponentUpdate(nextProps, nextState) {
   return false;
}

组件可以分析其当前状态和 props 与更新后的状态和 props，并决定是否可以跳过渲染部分。

纯组件 - 而不是编写shouldComponentUpdate，通过扩展 React.PureComponent 来编写组件的纯版本。如果给定的输入相同，纯组件通常会发出相同的输出。纯组件将进行浅比较并跳过协调。但是，有一个问题。如果更改不是浅更改，则 React 将跳过更新和渲染。要解决此问题，只需通过可见的变异进行更改，如下所示：

// non-mutation (wrong way to code)
const words = this.state.words;
words.push('john');
this.setState({words: words});

// mutated version (right way to code)
this.setState(state => ({
   words: state.words.concat(['marklar'])
}));

这里，

  • 在代码的第一个版本中，对象未发生变异。因此，与旧对象的比较成功并跳过协调。

  • 在代码的第二个版本中，对象发生了变异，并且将在比较过程中被捕获。

应用窗口技术

在本节中，让我们创建一个新的 React 应用程序，通过应用窗口技术来渲染大型用户列表。

首先，使用以下命令创建一个新的 React 应用程序并启动它。

create-react-app myapp
cd myapp
npm start

接下来，使用以下命令安装 bootstrap 和 react-bootstrap 库，

npm install --save react-window

接下来，打开App.css（src/App.css）并删除所有 CSS 类。

// remove all css classes

接下来，在public文件夹下创建一个文件 users.json，并使用以下用户信息填充它，

[
   {
      "id":1,
      "name":"Fowler",
      "age":18
   },
   {
      "id":2,
      "name":"Donnell",
      "age":24
   },
   {
      "id":3,
      "name":"Pall",
      "age":26
   },
   {
      "id":4,
      "name":"Christos",
      "age":19
   },
   {
      "id":5,
      "name":"Dud",
      "age":29
   },
   {
      "id":6,
      "name":"Rayner",
      "age":22
   },
   {
      "id":7,
      "name":"Somerset",
      "age":31
   },
   {
      "id":8,
      "name":"Stavros",
      "age":32
   },
   {
      "id":9,
      "name":"Cody",
      "age":19
   },
   {
      "id":10,
      "name":"Sharai",
      "age":19
   },
   {
      "id":11,
      "name":"Kristo",
      "age":28
   },
   {
      "id":12,
      "name":"Harvey",
      "age":27
   },
   {
      "id":13,
      "name":"Christen",
      "age":27
   },
   {
      "id":14,
      "name":"Hillard",
      "age":19
   },
   {
      "id":15,
      "name":"Jaine",
      "age":32
   },
   {
      "id":16,
      "name":"Annabel",
      "age":29
   },
   {
      "id":17,
      "name":"Hildagarde",
      "age":29
   },
   {
      "id":18,
      "name":"Cherlyn",
      "age":18
   },
   {
      "id":19,
      "name":"Herold",
      "age":32
   },
   {
      "id":20,
      "name":"Gabriella",
      "age":32
   },
   {
      "id":21,
      "name":"Jessalyn",
      "age":32
   },
   {
      "id":22,
      "name":"Opal",
      "age":31
   },
   {
      "id":23,
      "name":"Westbrooke",
      "age":27
   },
   {
      "id":24,
      "name":"Morey",
      "age":22
   },
   {
      "id":25,
      "name":"Carleton",
      "age":26
   },
   {
      "id":26,
      "name":"Cosimo",
      "age":22
   },
   {
      "id":27,
      "name":"Petronia",
      "age":23
   },
   {
      "id":28,
      "name":"Justino",
      "age":32
   },
   {
      "id":29,
      "name":"Verla",
      "age":20
   },
   {
      "id":30,
      "name":"Lanita",
      "age":18
   },
   {
      "id":31,
      "name":"Karlik",
      "age":23
   },
   {
      "id":32,
      "name":"Emmett",
      "age":22
   },
   {
      "id":33,
      "name":"Abran",
      "age":26
   },
   {
      "id":34,
      "name":"Holly",
      "age":23
   },
   {
      "id":35,
      "name":"Beverie",
      "age":23
   },
   {
      "id":36,
      "name":"Ingelbert",
      "age":27
   },
   {
      "id":37,
      "name":"Kailey",
      "age":30
   },
   {
      "id":38,
      "name":"Ralina",
      "age":26
   },
   {
      "id":39,
      "name":"Stella",
      "age":29
   },
   {
      "id":40,
      "name":"Ronnica",
      "age":20
   },
   {
      "id":41,
      "name":"Brucie",
      "age":20
   },
   {
      "id":42,
      "name":"Ryan",
      "age":22
   },
   {
      "id":43,
      "name":"Fredek",
      "age":20
   },
   {
      "id":44,
      "name":"Corliss",
      "age":28
   },
   {
      "id":45,
      "name":"Kary",
      "age":32
   },
   {
      "id":46,
      "name":"Kaylee",
      "age":21
   },
   {
      "id":47,
      "name":"Haskell",
      "age":25
   },
   {
      "id":48,
      "name":"Jere",
      "age":29
   },
   {
      "id":49,
      "name":"Kathryne",
      "age":31
   },
   {
      "id":50,
      "name":"Linnea",
      "age":21
   },
   {
      "id":51,
      "name":"Theresina",
      "age":24
   },
   {
      "id":52,
      "name":"Arabela",
      "age":32
   },
   {
      "id":53,
      "name":"Howie",
      "age":22
   },
   {
      "id":54,
      "name":"Merci",
      "age":21
   },
   {
      "id":55,
      "name":"Mitchel",
      "age":30
   },
   {
      "id":56,
      "name":"Clari",
      "age":18
   },
   {
      "id":57,
      "name":"Laurena",
      "age":19
   },
   {
      "id":58,
      "name":"Odessa",
      "age":30
   },
   {
      "id":59,
      "name":"Pippy",
      "age":25
   },
   {
      "id":60,
      "name":"Wilmar",
      "age":23
   },
   {
      "id":61,
      "name":"Cherianne",
      "age":24
   },
   {
      "id":62,
      "name":"Huberto",
      "age":25
   },
   {
      "id":63,
      "name":"Ariella",
      "age":26
   },
   {
      "id":64,
      "name":"Lorant",
      "age":30
   },
   {
      "id":65,
      "name":"Francesca",
      "age":25
   },
   {
      "id":66,
      "name":"Ingamar",
      "age":28
   },
   {
      "id":67,
      "name":"Myrta",
      "age":27
   },
   {
      "id":68,
      "name":"Nicolette",
      "age":26
   },
   {
      "id":69,
      "name":"Petra",
      "age":22
   },
   {
      "id":70,
      "name":"Cyrill",
      "age":27
   },
   {
      "id":71,
      "name":"Ad",
      "age":23
   },
   {
      "id":72,
      "name":"Denys",
      "age":22
   },
   {
      "id":73,
      "name":"Karilynn",
      "age":23
   },
   {
      "id":74,
      "name":"Gunner",
      "age":30
   },
   {
      "id":75,
      "name":"Falkner",
      "age":20
   },
   {
      "id":76,
      "name":"Thurston",
      "age":19
   },
   {
      "id":77,
      "name":"Codi",
      "age":30
   },
   {
      "id":78,
      "name":"Jacob",
      "age":31
   },
   {
      "id":79,
      "name":"Gasparo",
      "age":26
   },
   {
      "id":80,
      "name":"Mitzi",
      "age":29
   },
   {
      "id":81,
      "name":"Rubetta",
      "age":21
   },
   {
      "id":82,
      "name":"Clary",
      "age":20
   },
   {
      "id":83,
      "name":"Oliviero",
      "age":24
   },
   {
      "id":84,
      "name":"Ranique",
      "age":21
   },
   {
      "id":85,
      "name":"Shae",
      "age":24
   },
   {
      "id":86,
      "name":"Woodrow",
      "age":20
   },
   {
      "id":87,
      "name":"Junia",
      "age":31
   },
   {
      "id":88,
      "name":"Athene",
      "age":26
   },
   {
      "id":89,
      "name":"Veriee",
      "age":18
   },
   {
      "id":90,
      "name":"Rickie",
      "age":30
   },
   {
      "id":91,
      "name":"Carly",
      "age":23
   },
   {
      "id":92,
      "name":"Vern",
      "age":19
   },
   {
      "id":93,
      "name":"Trix",
      "age":26
   },
   {
      "id":94,
      "name":"Lenore",
      "age":20
   },
   {
      "id":95,
      "name":"Hanna",
      "age":30
   },
   {
      "id":96,
      "name":"Dominique",
      "age":21
   },
   {
      "id":97,
      "name":"Karlotta",
      "age":22
   },
   {
      "id":98,
      "name":"Levey",
      "age":20
   },
   {
      "id":99,
      "name":"Dalila",
      "age":18
   },
   {
      "id":100,
      "name":"Launce",
      "age":21
   }
]

接下来，创建一个简单的用户列表组件，SimpleWindow（src/Components/SimpleWindow.js），并通过应用窗口功能来渲染用户列表，如下所示：

import React from "react";
import { FixedSizeList as List } from 'react-window';
class SimpleWindow extends React.Component {
   constructor(props) {
      super(props);
      this.state = {
         data: []
      };
   }
   componentDidMount() {
      fetch("users.json")
         .then((response) => response.json())
         .then((data) => {
            this.setState({
               data: data
            });
         });
   }
   render() {
      return (
         <List
            innerElementType="ul"
            itemData={this.state.data}
            itemCount={this.state.data.length}
            itemSize={35}
            width={500}
            height={300}
         >
         {
            ({data, index, style}) => {
               return (
                  <li style={style}>
                     {data[index].name}
                  </li>
               )
            }
         }
         </List>
      )
   }
}
export default SimpleWindow

这里我们有，

  • 将FixedSizeList组件导入为List。

  • 在componentDidMount()生命周期事件中，使用fetch方法从users.json url获取用户列表。

  • 使用FixedSizeList组件渲染用户列表。

  • innerElementType FixedSizeList组件的props指的是要在组件内部生成的元素。

  • itemData、itemCount和itemSize分别指的是项目列表、可用项目的总数和每个项目的大小。

接下来，打开 App 组件（src/App.js），并包含SimpleWindow组件，如下所示：

import './App.css'
import React from 'react';
import SimpleWindow from './Components/SimpleWindow'
function App() {
   return (
      <div className="container">
         <div style={{ padding: "10px" }}>
            <div>
               <SimpleWindow />
            </div>
         </div>
      </div>
   );
}
export default App;

这里，

  • 使用import语句导入我们的新组件SimpleWindow

  • 渲染我们的新SimpleWindow组件。

最后，在浏览器中打开应用程序并检查最终结果。表格组件将按如下所示渲染：

Applying Windowing Technique

总结

React 会开箱即用地优化应用程序。此外，React 库在每个版本中都会改进优化。除了这些优化之外，我们还可以遵循上面讨论的技术来从我们这边改进性能。

打印页面
上一页
下一页
广告