ReactJS 片段

我们知道，每当我们想在屏幕上渲染某些东西时，我们都会使用组件内部的 render 方法。我们可以渲染单个元素或多个元素，尽管渲染多个元素需要在内容周围添加一个“div”标签，因为 render 方法一次只会渲染其中的一个根节点。

示例：创建一个 React 应用程序并编辑 src 文件夹中的App.js文件，如下所示：

文件名 - App.js：

javascript

import React from "react";
  
// Simple rendering with div
class App extends React.Component {
  render() {
    return (
      // Extraneous div element
      

        
Hello
  
        
How you doin'?
      
    );
  }
}
  
export default App;

输出：

使用 Fragments 的原因：正如我们在上面的代码中看到的，当我们尝试渲染多个根元素时，我们必须将整个内容放在不被许多开发人员喜欢的 'div' 标签中。所以在 React 16.2 版本中，引入了Fragments ，我们使用它们来代替无关的 'div' 标签。

句法：

  
      
Child-1
   
      
 Child-2
   
  

示例：打开App.js并将代码替换为以下代码。

javascript

import React from "react";
  
// Simple rendering with fragment syntax
class App extends React.Component {
  render() {
    return (
      
        
Hello
  
        
How you doin'?
      
    );
  }
}
  
export default App;

输出：

速记片段：第一个代码的输出和上面的代码是一样的，但是使用它的主要原因是它比里面有'div'标签的那个快一点，因为我们没有创建任何 DOM 节点。此外，它占用的内存更少。上述方法还存在另一种简写，我们使用 '<>' 和 '' 而不是 'React.Fragment'。

注意：速记语法不接受关键属性，在这种情况下您必须使用 标记。
句法：

<>  
      
Child-1
   
      
 Child-2
   
 

示例：打开App.js并将代码替换为以下代码。

javascript

import React from "react";
  
// Simple rendering with short syntax
class App extends React.Component {
  render() {
    return (
      <>
        
Hello
  
        
How you doin'?
      
    );
  }
}
  
export default App;

输出：