在 ReactJS 中优化性能

性能在任何应用程序中都很重要。在 ReactJS 中，优化性能是启动 React 应用程序之前的一项重要任务。有不同的方法可以探索优化 React 应用程序，这有助于提高速度和效率以及用户体验。

ReactJS 是一个用于制作 UI 和应用程序的 JavaScript 库。 React 提供了不同的方法来最小化更新 UI 所需的昂贵的 DOM 操作。在大多数情况下，使用 React 将带来快速的 UI 体验，而无需做很多工作来优化性能。

有几种方法可以加速你的 React 应用程序。这些是要遵循的方法：

• 使用 React.Fragment –使用 React 时，有时我们需要渲染多个元素或返回一组相关项。使用额外的 div 来换行可以解决这个问题，但它会带来一个问题。因为我们正在向 DOM 添加一个额外的节点，这完全没有用。在这种情况下，我们将子组件包含在父组件中。在这里我们遇到了这个问题。让我们通过使用 React Fragment 来解决这个问题，这将有助于不向 DOM 添加任何额外的节点。
  
• 使用生产构建——优化 React 应用程序的另一种方法是确保在部署之前将应用程序打包用于生产。默认情况下，应用程序处于开发模式，这意味着 React 将包含有用的警告。当您开发 ReactJS 应用程序时，此方法很有用，但它会产生一个问题，即您的应用程序很大并且响应比平时慢。如果项目是使用 create-react-app 构建的，这可以通过在部署之前运行 npm run build 来修复，这将在 build/ 文件夹中创建应用程序的生产就绪构建，然后可以部署。这可以确保您的应用程序使用 React 开发人员工具处于开发或生产模式。

从项目目录运行代码：

npm run build

这将创建 ReactJS 应用程序的生产版本。

• Prefer component state local –每当父组件中的状态更新时，它都会重新渲染父组件及其子组件。因此，我们需要确保仅在必要时才重新渲染组件。我们可以通过将其本地化到该部分代码来实现这一点。
• 记忆 React 组件——React.memo 是一种优化性能的好方法，因为它有助于缓存功能组件。
• 记忆一般是一种优化技术，主要用于通过存储昂贵的函数调用的结果并在再次出现相同的输入时返回缓存的结果来加速计算机程序。每当使用这种技术渲染函数时，它会将输出保存在内存中，并且下次调用具有相同参数的函数时，它会返回保存的输出而不再次执行该函数。
• 窗口化或列表虚拟化——窗口化或列表虚拟化是一个仅将当前“窗口”中的可见部分渲染或写入到 DOM 的概念。第一次渲染的项目数小于原始项目数。向下滚动到第一个小窗口时将加载未在第一个小窗口中呈现的项目。从当前窗口退出的项目的 DOM 节点将替换为第一次未呈现的新项目。这提高了渲染大型列表的性能。

让我们创建一个应用程序并实现以上所有内容来优化我们的 React 应用程序

创建反应应用程序：

第 1 步：使用以下命令创建一个 React 应用程序：

npx create-react-app example

第 2 步：创建项目文件夹（即示例）后，使用以下命令移动到该文件夹：

cd example

项目结构：它看起来像这样。

项目结构

示例：演示如何优化 React 应用程序。在 index.js 和 App.js 中写下以下代码

• index.js

Javascript

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
  
ReactDOM.render(
    
        
    ,
    document.getElementById('root')
);

• 应用程序.js

Javascript

import React from "react";
  
const numbers = [1, 2, 3, 4, 5];
  
function List(props) {
    const numbers = props.numbers;
    const listItems = numbers.map((number, index) =>
        
{number}
);
    return (
        <> {/*This is a short format of fragment */}
            
List of numbers
            
{listItems}
        
    );
}
  
function App() {
    return (
         
        {/*Fragment is a component that is not rendered */}
            
        
    );
}
  
export default App;

在上面的代码中，我们使用了 React 片段，将组件保留在本地，并优化了 React 应用程序。

运行应用程序的步骤：从项目的根目录运行以下命令。

npm start

输出 ：

输出