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、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 及其更新状态，并决定是否可以跳过渲染部分。
纯组件 − 不要编写 shouldComponentUpdate，而是通过扩展 React.PureComponent 编写纯组件版本。如果给定的输入相同，纯组件通常会发出相同的输出。纯组件将进行浅层比较并跳过协调。但是，有一个问题。如果更改不浅，则 React 将跳过更新和渲染。要修复它，只需通过可见的突变完成更改即可，如下所示 −
// 非突变(错误的编码方式)
const words = this.state.words;
words.push('john');
this.setState({words: words});
// 突变版本(正确的编码方式)
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 类。
// 删除所有 css 类
接下来，在 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 组件渲染使用列表。
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 从基础开始优化应用程序。此外，React 库在每个版本中都改进了优化。除了这些优化之外，我们还可以遵循上面讨论的技术来从我们的角度提高性能。
