React 中的 Fragment 有什么用？

在 ReactJS 中，我们借助 return 语句从组件渲染 JSX，无论是写在功能组件内部还是类组件的渲染函数内部。现在的重点是，在 javascript 中，return 语句只能返回一个实体，所以当我们必须从 return 语句中返回多个元素时，我们通常会创建额外的节点。这个额外的节点有一些缺点，因此为了避免它们，我们使用 React Fragment。

先决条件：了解如何启动和创建 React 应用程序，React 中的 JSX，以及 HTML DOM 的基础知识。

组件如何渲染？

创建 react 应用程序后，在 index.js 和 app.js 中进行以下更改，我们将只使用这两个文件。 index.js 文件是主要入口点，在其中，App.js 在render方法的帮助下在 DOM 的根 id 处呈现。在 App.js 中只存在一个 h1 标签。

index.js

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

App.js

import React from 'react';
  
function App() {
  return (
    Hello There
  );
}
  
export default App;

App.js

import React from 'react';
  
function App() {
  return (
    Hello, There
    This is the another element.
  );
}
  
export default App;

App.js

import React from 'react';
  
function App() {
  return (
    Hello, There
    This is the another element.
  );
}
  
export default App;

应用程序.js

import React from 'react';
  
function App() {
  return (
    Hello There
  );
}
  
export default App;

输出：

如果我们必须在 DOM 中返回相同级别的两个不同元素怎么办？

在这种情况下，我们必须使用容器，即 div 否则 React 将出现类似“相邻 JSX 元素必须包装在封闭标签中”的错误。

应用程序.js

import React from 'react';
  
function App() {
  return (
    Hello, There
    This is the another element.
  );
}
  
export default App;

输出：

反应片段

它允许我们从组件返回多个元素，使用它我们可以对子元素列表进行分组。

应用程序.js

import React from 'react';
  
function App() {
  return (
    Hello, There
    This is the another element.
  );
}
  
export default App;

输出：

说明：虽然输出保持不变，但整个关键点是在分组时它不会创建任何额外的节点。在很多情况下，这个额外的 div 会导致我们进入有问题的状态，这就是为什么我们应该总是更喜欢片段进行分组。

注意：我们也可以使用这种<> 语法糖形式来代替。