如何防止组件渲染？

React 是一个用于构建用户界面的声明式、高效且灵活的 JavaScript 库。它是 MVC 中的“V”。 ReactJS 是一个开源的、基于组件的前端库，只负责应用程序的视图层。它由 Facebook 维护。

当使用 React 设计 UI 时，我们会遇到一种情况，即组件要根据某些条件呈现在屏幕上。例如，在大学信息系统中，当教师登录时，会呈现不同的组件，而当学生登录时，会呈现不同的组件。

这称为 React 组件的条件渲染。

条件渲染：创建多个组件并根据某些条件进行渲染。这也是 React 支持的一种封装。

如何进行条件渲染？

它是使用 stateVariable 完成的。 stateVariable 的值决定是否渲染组件。它的值可以通过任何事件（如 onClick）的发生来改变。

如何防止组件渲染？为了防止组件根据条件渲染，返回“NULL”

创建反应应用程序：

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

npx create-react-app foldername

第 2 步：完成后，使用以下命令将目录更改为新创建的应用程序。

cd foldername

项目结构：项目应如下所示：

示例 1：在此示例中，我们将返回一张显示一些信息的卡片。这张卡被分配给一个功能组件即
在app.js中，我们将使用一些道具调用这个组件两次。根据 props 的值，如果传递的值为“display”，则返回组件，否则返回 null。

Javascript

import React from 'react'
import { useState } from 'react';
import Card from '@mui/material/Card';
import CardContent from '@mui/material/CardContent';
import CardMedia from '@mui/material/CardMedia';
import Typography from '@mui/material/Typography';
import { CardActionArea } from '@mui/material';
import Divider from '@mui/material/Divider';
import Stack from '@mui/material/Stack';
function Rendering(props) {
    if (props.value === 'notDisplay') {
        return null;
    }
    if (props.value === 'display') {
        return (
            

                
Courses available on GeeksforGeeks
                

                    
                        
                        
                            
                                Java
                            
                            
                                The Java codes are first compiled 
                                into byte code (machine-independent 
                                code). Then the byte code runs on 
                                Java Virtual Machine (JVM)
                                regardless of the underlying 
                                architecture.
                            
                        
                    
                
            
            
        )
    }
}
function App() {
    return (
        

            

                

                    GeeksforGeeks
                
                

                    Preventing Rendering of 
                    Components in React
                
                
                
            
        
    );
}
export default App;

输出：

说明：请注意， 被调用了两次，但只有 1 次组件在屏幕上呈现。

示例 2：在此示例中，我们将通过将整数作为 props 传递来显示调用组件。但只会显示偶数。通过返回 null 将阻止呈现奇数。

Javascript

import React from 'react';
function Rendering(props) {
    if (parseInt(props.value) % 2 != 0) {
        return null;
    }
    if (parseInt(props.value) % 2 == 0) {
        return (
            

                

                    {props.value}
                
            
        )
    }
  
function App() {
    return (
        

            

                
GeeksforGeeks
                
Preventing Rendering of Components in React
                

                    Only Even props will be displayed
                


                
                
                
                
                
                
                
                
                
                
            
        
    );
}
export default App;

输出：

说明：看到组件被调用了 10 次，但是带有奇数 props 的组件通过返回 null 来阻止渲染。