Фрагменты ReactJS

Опубликовано: 7 Августа, 2021

Мы знаем, что используем метод рендеринга внутри компонента всякий раз, когда хотим что-то отобразить на экране. Мы можем визуализировать один элемент или несколько элементов, хотя для визуализации нескольких элементов потребуется тег «div» вокруг содержимого, поскольку метод визуализации будет отображать только один корневой узел внутри него за раз.

Пример: создайте приложение React и отредактируйте файл App.js из папки src как:

Имя файла - App.js:

javascript




import React from "react" ;
// Simple rendering with div
class App extends React.Component {
render() {
return (
// Extraneous div element
<div>
<h2>Hello</h2>
<p>How you doin'?</p>
</div>
);
}
}
export App; default 
Выход:
Причина использования фрагментов: как мы видели в приведенном выше коде, когда мы пытаемся отобразить более одного корневого элемента, мы должны поместить все содержимое в тег div, который не нравится многим разработчикам. Итак, в версии React 16.2 были введены фрагменты , и мы использовали их вместо постороннего тега div.
Синтаксис:
 <Реагировать.Фрагмент>  
      <h2> Ребенок-1 </h2>   
      <p> Ребенок-2 </p>   
</React.Fragment>
Пример: откройте App.js и замените код приведенным ниже кодом.
 javascript 



 import React from "react" ;
 
// Simple rendering with fragment syntax
 class App extends React.Component {
  render() {
    return (
      <React.Fragment>
        <h2>Hello</h2>
 
        <p>How you doin'?</p>
      </React.Fragment>
    );
  }
 }
 
export App; default 
Выход:
Сокращенный фрагмент: вывод первого кода и приведенного выше кода одинаков, но основная причина использования заключается в том, что он немного быстрее по сравнению с фрагментом с тегом 'div' внутри него, поскольку мы не создавали любой узел DOM. Кроме того, требуется меньше памяти. Для вышеупомянутого метода также существует другое сокращение, в котором мы используем «<>» и «</>» вместо «React.Fragment».
Примечание . Сокращенный синтаксис не принимает ключевые атрибуты, в этом случае вам нужно использовать тег <React.Fragments>.
 Синтаксис:
 <>  
      <h2> Ребенок-1 </h2>   
      <p> Ребенок-2 </p>   
</>
Пример: откройте App.js и замените код приведенным ниже кодом.
 javascript 



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

            

                            

                    
                                    

                        

                
РЕКОМЕНДУЕМЫЕ СТАТЬИ