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>

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

npm run build

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

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

Rollup - 使用rollup的应用程序应安装commonjs，替换和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;
}

组件可以使用其更新的状态来分析其当前状态和属性，并决定是否可以跳过渲染部分。

纯组件 - 通过扩展 React.PureComponent 来编写组件的纯版本，而不是编写 shouldComponentUpdate。如果给定的输入相同，纯组件通常会发出相同的输出。纯组件将进行浅层比较并跳过对账。但是，有一个问题。如果更改不浅，那么 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

接下来，创建一个文件，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） 并通过应用 windows 功能来渲染用户列表，如下所示 -


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 组件呈现使用列表。
  • FixedSizeList 组件的 innerElementType 属性是指要在组件内部生成的元素。
  • 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 组件。

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

应用窗口技术

总结

React 从 bax 中优化了应用程序。此外，React 库改进了每个版本的优化。除了这些优化之外，我们还可以按照上述讨论的技术从我们这端提高性能。

打印本页
上一页
下一页