为什么片段比容器 div 更好？

React Fragments 是一种将多个元素添加到 React 组件的现代方式，而无需将它们包装在额外的 DOM 节点中。 React.js 使用 return 语句呈现 JSX。为了渲染一个组件，我们使用了 render 方法，它一次渲染一个根节点。每当我们需要渲染多个元素时，我们都需要将它们封装在一个包装器元素中。如果没有包装元素，组件将不会在 DOM 上呈现。

我们通常会创建一个额外的节点，即如果我们必须从 return 语句中返回多个元素，我们会使用“div”标签包装内容，因为一次只呈现一个根节点。现在，一个额外的 div 可能会破坏 HTML 中的 DOM。我们可以使用React Fragment代替这个额外的节点来消除它的缺点。

是什么让 React Fragments 作为包装元素比 div 标签更好？

我们在使用 div 标签时可能会遇到的问题：

• 增加 DOM 的大小：当页面上有太多 DOM 节点或 HTML 标记，或者当这些节点嵌套太深时，DOM 会变大。因此，用户的浏览器会消耗额外的电量来处理您的网站，从而导致页面加载时间变慢和页面速度得分较低。
• 使用 div 会创建额外的节点，从而导致高内存使用。
• 过大的 DOM 会导致内存使用量增加、样式处理滞后以及布局重排成本高昂。
• 在较旧的设备上，这可能会使您的 HTML 变得混乱，从而导致性能问题。
• 随着组件树嵌套的更深，调试和跟踪额外节点的来源变得更具挑战性。
• 很难保持想要的布局：Flexbox 和 Grid 具有独特的父子关系，添加 div 会破坏标记。

因此，React 片段比 'div' 标签更好。使用 React Fragment，您可以渲染组件的多个元素，而无需添加额外的 div 标签。我们可以使用 React Fragments 编写更清晰、更易读的代码。它占用更少的内存并更快地渲染组件。每个组件都按预期呈现。

示例：让我们使用 flexbox 制作调色板（颜色阴影卡）模式，并了解为什么反应片段比 'div' 标签更好。

方法：我们将在 flexbox 的帮助下制作调色板模式。基本上，它将是一个由不同深浅的绿色组成的矩形条。在下面的示例中，我们将看到 React Fragment 如何帮助我们避免 div 标签的缺点。

第 1 步：创建一个反应应用程序

要创建反应应用程序，请在终端中键入以下命令。我们将创建一个名为“react-fragments-gfg”的反应应用程序。

npx create-react-app react-fragments-gfg

第 2 步：目录结构目前如下所示：

默认目录结构

我们将修改文件夹并保留此示例所需的文件。现在，确保您的文件结构看起来像这样。

目录结构

第 3 步：在app.js 文件中编写以下代码。

在 app.js 文件中，我们将编写代码来生成一个由不同颜色的框组成的矩形条。我们将使用Flexbox来实现这一点。 flexbox 按行或列排列项目。在这一步中，我们将创建一个Row组件、一个Column组件和一个Shadecard组件。行是父组件，由一个包装列和阴影卡组件的 div 容器组成。当您调用一个组件时，this.props.children 用于显示您在开始和结束标记之间包含的任何内容。这将显示列和阴影卡组件。列组件由一个类 col 的 div 容器组成，该容器包装了 Shadecard 组件。每个盒子都代表一个 Shadecard 组件。每个盒子都有不同的颜色。

Javascript

// App.js file code 
import './App.css';
  
// Creating the Row component 
const Row = ({ children }) => 
{children}
;
  
// Creating the Column component
const Column = ({ children }) => 
{children}
;
  
// Creating the Shadecard component
const Shadecard = ({ color ,shade }) => (
  

  {shade}
  
);
  
 const App = ()=> {
  return (
    
      
        
      
      
        
      
      
        
      
      
        
      
      
        
      
      
        
      
      
        
      
      
        
      
    
  );
}
  
export default App ;

第 4 步：修改index.html文件，如下所示，并删除已经存在的不必要代码。

HTML

第 5 步：在index.js 文件中编写以下代码。 index.js 文件作为主要入口点，其中 App.js 文件在 DOM 的根 ID 处呈现。

应用程序.js

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

第 6 步：要为您的项目设置样式，请将以下代码添加到app.css文件中。

CSS

.row {
    display: flex;
}
  
.col {
    flex: 1;
}
  
.card {
    min-width: 100px;
    min-height: 100px;
    text-align: center;
    font-weight: bold;
    border: 1px solid black;
}

第 7 步：在终端中运行以下命令，运行 react 应用程序“react-fragments-gfg”。

npm start 

输出：默认情况下，创建的 React 项目将在端口 3000 上运行。您可以在浏览器上通过localhost:3000访问它。所需的调色板图案如下所示。

渲染所需的调色板图案

现在，例如，您可能希望将较浅的阴影与较暗的阴影分离，并将其用作可重用的组件。

第 8 步：我们将重构app.js文件中的代码，将较浅的阴影分离到一个名为Lightshades的单独组件中。我们将创建一个单独的组件“Lightshades”来显示较浅的阴影，而 Shadecard 组件包含所有较暗的阴影。

应用程序.js

// Modifying the app.js file
import './App.css';
  
const Row = ({ children }) => 
{children}
;
  
const Column = ({ children }) => 
{children}
;
  
const Shadecard = ({ color, shade }) => (
  

    {shade}
  
);
  
// Separating the light colors into a different component
const Lightshades = () => {
  return (
    

      
        
      
      
        
      
      
        
      
      
        
      
    
  );
};
  
const App = () => {
  return (
    
      
      
        
      
      
        
      
      
        
      
      
        
      
    
  );
};
  
export default App;

第 9 步：现在再次启动服务器，您将看到以下输出。

我们刚刚将较浅的色调分离成一个可重用的组件，因此您可能会期待相同的结果。结果将与我们的预期不同。组件的分离打破了我们的布局。

Lightshades 组件中的所有 JSX 元素 被包裹在一个div中。这个 div 最终破坏了布局，因为浏览器将这个额外的 div 视为我们布局的一部分，而不是作为包含 Html 的包装器。我们的浏览器不知道我们添加了该 div 以避免错误。添加不必要的 div 可能会导致布局失败。

布局中断

您可以通过将组件的 JSX 包装在 React Fragment 中来轻松解决此问题。您可以使用 React Fragments 统一子节点，而无需添加额外的包装 DOM 元素。 React 片段消除了将元素包装在

中的本能。

有几种方法可以创建和渲染片段：

使用 React.Fragment 语法：

Javascript

// Modifying the LightShade component in app.js file
  
const Lightshades = () => {
  return (
    <>
      
        
      
      
        
      
      
        
      
      
        
      
    
  );
};

片段属性可以从 React 对象中导入，如下所示：

import React, {Fragment} from 'react' 

Javascript

// Wrapping the JSX elements of Lightshades using fragments
// Importing fragment properties from react object :
import React, { Fragment } from 'react';
  
const Lightshades = () => {
  return (
    <>
      
        
      
      
        
      
      
        
      
      
        
      
    
  );
};

短语法 <>：使用 Fragments 的最干净和最简单的方法

或者，可以使用看起来像空标记的简短语法声明片段。

第 10 步：让我们使用简短语法将 Lightshades 组件的 JSX 元素包装在一个反应片段中。在app.js文件中， 使用 <> 包装 Lightshades 组件的元素，替换 div 标签。

应用程序.js

// Wrapping the JSX elements of Lightshades component using the short syntax
import React from 'react';
import './App.css';
  
const Row = ({ children }) => 
{children}
;
  
const Column = ({ children }) => 
{children}
;
  
const Shadecard = ({ color, shade }) => (
  

    {shade}
  
);
  
// Separating the light colors into a different component
const Lightshades = () => {
  return (
    <>
      
        
      
      
        
      
      
        
      
      
        
      
    
  );
};
  
const App = () => {
  return (
    
      
      
        
      
      
        
      
      
        
      
      
        
      
    
  );
};
  
export default App;

输出：使用上述任何一种方法都将恢复所需的调色板布局。

使用反应片段

现在，我们将通过添加一个额外的 div 并使用一个反应片段来包装 JSX 元素来检查 DOM 结构。

DOM 结构：使用反应片段。

DOM

DOM 结构：使用额外的 div 作为包装元素。

DOM

额外的 div 使 DOM 变得混乱。这是一个非常简单的场景，我们将 JSX 元素包含在一个 div 中。如果我们添加更多组件，应用程序会变得更加复杂，最终可能会呈现大量不必要的 div 标签。因此，影响会更大。

结论：使用 React Fragment，您可以渲染一个组件的多个元素，而无需添加额外的 div 标签。 React Fragments 使我们能够编写更清晰、更易读的代码。它可以更快地渲染组件并消耗更少的内存。它给出了预期的组件输出。