ReactJS 中 shouldComponenUpdate() 方法的用途是什么？

在本文中，我们将了解shouldComponentUpdate()方法在基于类的组件中的用法。 shouldComponentUpdate() 生命周期方法不会针对初始渲染运行，而是针对初始渲染后的每次重新渲染运行。当组件中接收到更新的道具或状态时，在组件重新渲染之前调用它。此外，它的默认值为 true。我们可以在一些条件 JSX 的帮助下通过覆盖它来更改默认值。它的主要用例是优化 React Web 应用程序。它可用于避免对 react 组件进行不必要的重新渲染。让我们通过一个例子来理解它。

创建 React 应用程序并安装模块：

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

npx create-react-app foldername

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

cd foldername

第 3 步：使用以下命令运行开发服务器：

npm start

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

实现：在各自的文件中添加代码。

App.js：在这个组件中，我们创建了一个 geeksCourses 数组，其中包含可用课程的数据，在 useState() 钩子的帮助下称为购物车的状态，应用了一些基本样式。还以各自的名字传递了道具。

Javascript

import { useState } from "react";
import "./App.css";
import Cart from "./Components/Cart";
import Courses from "./Components/Courses";
  
function App() {
    let geekCourses = [
        {
            title: "App development with Java and Kotlin",
            price: 10000,
            duration: 5,
            mentor: "Aman Negi",
            TA: "Rahul Negi",
            classesPerWeek: 5,
        },
        {
            title: "Web development Nodejs",
            price: 9000,
            duration: 4,
            mentor: "Riya Rawat",
            TA: "Mihir Rawat",
            classesPerWeek: 4,
        },
        {
            title: "MERN stack ",
            price: 12000,
            duration: 6,
            mentor: "Kartik Sayana",
            TA: "Amogh Sayana",
            classesPerWeek: 6,
        },
        {
            title: "Machine Learning with python",
            price: 10000,
            duration: 6,
            mentor: "Rohit Jain",
            TA: "Utkarsh Jain",
            classesPerWeek: "5",
        },
    ];
  
    const [cart, setCart] = useState({});
  
    return (
        <>
            

                
Geeks Courses
            
            

                
                
            
        
    );
}
  
export default App;

Courses.js ：在这个组件中，我们添加了基本样式、解构的 geekCourses 和来自 props 的 setCart 属性。将 onClick 处理程序连接到 geekCourses 数组中的每个课程 JSX，单击该处理程序时将更新用户的购物车。

Javascript

import React from "react";
import PropTypes from "prop-types";
  
const Courses = ({ geekCourses, setCart }) => {
    let displayCourses = geekCourses.map((course, idx) => {
        return (
            

                
 {course.title} 
                

                    
                        Duration: {course.duration} days
                    
  
                    
                        Price: {course.price} Rs
                    
                
                

                    
                        Mentor: {course.mentor}
                    
  
                    
                        TA: {course.TA}
                    
                
                

                     {
                            let newCart = {
                                title: course.title,
                                mentor: course.mentor,
                                price: course.price,
                            };
                            setCart(newCart);
                        }}
                    >
                        BUY
                    
                
            
        );
    });
    return (
        <>
            

                

                    {displayCourses}
                
            
        
    );
};
  
export default Courses;

Cart.js：这个组件展示了shouldComponentUpdate()方法的实际用例。我们知道这个方法有两个参数，即 nextProps 和 nextState。在这个方法中，我们添加了条件逻辑来根据 nextProps 的标题和当前购物车的标题之间的比较来返回 true 或 false。这种比较是一种简单的比较，不建议用于大型应用程序，在复杂的应用程序中，我们可以使用区分任何两个课程或对象的属性来进行比较并返回组件是否应该更新。这个方法的返回值决定了组件是否会更新。我们还使用了条件运算符，当对象最初为空（对象的键长度为零）时，我们将显示一些数据，否则我们将显示购物车。

Javascript

import React, { Component } from "react";
  
export class Cart extends Component {
    shouldComponentUpdate(nextProps, nextState) {
        const { cart } = this.props;
        console.log("nextProps", nextProps.cart);
        if (Object.keys(cart).length === 0) return true;
        return nextProps.cart.title !== this.props.cart.title;
    }
    render() {
        console.log("rendering Cart Component");
        const { cart } = this.props;
  
        let cartData = (
            <>
                

                    
{cart.title}
                    
 {cart.mentor} 
                
  
                

                    {cart.price}
                    
                        CHECKOUT
                    
                
            
        );
        return (
            

                {Object.keys(cart).length === 0 ? (
                    
Your cart is empty
                ) : (
                    <>
                        

                            Your-Cart
                        
 {cartData}
                    
                )}
            
        );
    }
}
  
export default Cart;

输出：

网络应用

在初始渲染时：注意控制台日志。

初始渲染

首次点击：我们可以在控制台中看到，当我们点击第一门课程将其添加到购物车时，购物车组件会重新渲染。

在第二次单击时：再次注意控制台日志。这次Cart组件不会重新渲染，因为状态没有任何变化。即以前的状态在购物车中有应用程序开发课程，单击它后添加相同的课程。因此shouldComponentUpdate()方法返回 false 从而不会重新渲染Cart组件并优化 Web 应用程序的性能。

网络应用程序的工作演示：

在这种情况下，第一门课程总共被点击了 3 次。