如何改善缓慢的 React 应用程序渲染？

ReactJS 是一个用于构建用户界面的 JavaScript 库。它是由 Facebook 维护的声明式、高效且灵活的 JavaScript 库。

什么是渲染？

React 使用虚拟 DOM 的概念。 React 中的所有元素都是使用 render 方法渲染的，我们必须在其中提供要渲染的元素（主要是 div）的id 。 React 中的每个元素都是不可变的。因此，要更新元素，我们必须再次调用 Render 方法。请参阅此处了解更多详情。

什么是慢反应应用程序渲染？

顾名思义，缓慢的 React 应用程序渲染是渲染元素的小或大延迟。这可能有多种原因。应该避免这种情况。

改进慢速 React 应用程序渲染的方法：

在下面的方法中，我们将看到如何有效地使用钩子来避免渲染缓慢。 Hooks 可以在减少重新渲染的数量方面发挥重要作用。请记住，只要状态组件发生更改，就会发生重新渲染。它会导致 render 方法再次调用，然后通过比较 Virtual DOM 的副本只更新需要更新的部分。

下面是一个例子，如果函数中有一些大的计算， useMemo钩子如何来救援。

创建反应应用程序

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

  npx create-react-app useMemo 

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

  cd useMemo

项目结构：它将如下所示。

Example1：不使用useMemo Hook

App.js

import { useState } from "react";
import "./App.css";
  
export default function App() {
  
  // 1st counter state
  const [counter1, setCounter1] = useState(0);
  
  // 2nd counter state
  const [counter2, setCounter2] = useState(0);
  
  // Sample Heavy Calculation Function
  const heavyCalculation = () => {
    let i = 0;
    for (let outer = 0; outer < 10000; outer++) {
      for (let temp = 0; temp < 10000; temp++) {
        while (i < 10000) i++;
      }
    }
    return counter1 % 2 === 0 ? true : false;
  };
  
  return (
    

      {heavyCalculation()
        ? `Counter is even with value ${counter1}`
        : `Counter is odd with value ${counter1}`}
      

       {
          setCounter1(counter1 + 1);
        }}
      >
        Increment counter1
      
      

      Counter 2 is {counter2}
      

       {
          setCounter2(counter2 + 1);
        }}
      >
        Increment counter2
      
    
  );
}

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

npm start

输出：现在打开浏览器并转到http://localhost:3000/ ，您将看到以下输出：

说明：在上面的输出中，渲染时调用了一个繁重的函数。现在即使它被用于第一个计数器，但由于 counter2 慢，它仍然会导致渲染。

示例 2：使用useMemo Hook

应用程序.js

import { useState, useMemo } from "react";
import "./App.css";
  
export default function App() {
  
  // 1st counter state
  const [counter1, setCounter1] = useState(0);
  
  // 2nd counter state
  const [counter2, setCounter2] = useState(0);
  
  // Our custom useMemo Function
  const useMemoFunction = useMemo(() => {
    let i = 0;
    for (let outer = 0; outer < 10000; outer++) {
      for (let temp = 0; temp < 10000; temp++) {
        while (i < 10000) i++;
      }
    }
    return counter1 % 2 === 0 ? true : false;
  }, [counter1]);
  
  return (
    

      {useMemoFunction
        ? `Counter is even with value ${counter1}`
        : `Counter is odd with value ${counter1}`}
      

       {
          setCounter1(counter1 + 1);
        }}
      >
        Increment counter1
      
      

      Counter 2 is {counter2}
      

       {
          setCounter2(counter2 + 1);
        }}
      >
        Increment counter2
      
    
  );
}

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

npm start

输出：现在打开浏览器并转到http://localhost:3000/ ，您将看到以下输出：

说明：在此，包含 counter1 作为依赖项的useMemo挂钩使用了重功能。由于这个 Counter1 仍然显示延迟，但它不影响 counter2 的性能。