Shulou(Shulou.com)06/02 Report--

This article will explain in detail how to introduce and use React Fragment. The content of the article is of high quality, so the editor will share it for you as a reference. I hope you will have a certain understanding of the relevant knowledge after reading this article.

When adding elements in batches to the DOM tree, it is a good practice to create a document.createDocumentFragment, first adding elements to the

On DocumentFragment, adding DocumentFragment to the DOM tree reduces the number of DOM operations without creating a new element.

Similar to DocumentFragment, React also has the concept of Fragment, and its use is very similar. Before React 16, Fragment was created through the expansion pack react-addons-create-fragment, while in React 16 it was created directly by creating 'Fragment'.

Motivation of Fragments emergence

A common pattern is for a component to return a list of child elements. Take this React snippet as an example:

Class Table extends React.Component {render () {return ();}}

Multiple elements need to be returned to make the rendered HTML valid. If in

If the parent div is used in render () of, the generated HTML will be invalid.

Class Columns extends React.Component {render () {return (Hello World);}}

Get one.

Output:

Hello World

As a result, Fragments solves this problem.

Introduction and use of React Fragment

The React.Fragment component can return multiple elements in the render () method without creating additional DOM elements. A common pattern is that a component returns multiple elements. Fragments allows you to group sublists without adding additional nodes to the DOM.

It is understood that when we define components, the outermost div in return often does not want to render to the page, so we need to use our Fragment component. Just like vue's.

Render () {return (Some text. A heading);}

You can also use its abbreviated grammar.

Render () {return (Some text. A heading);}

In addition, starting with react 16, render supports returning arrays, and many people are aware of this feature. This feature has been able to reduce unnecessary node nesting.

Import React from 'react';export default function () {return [1,2,3];} and the difference

Syntax cannot accept key values or attributes, you can.

Fragments declared using explicit syntax may have key. A usage scenario is to map a collection to a Fragments array-for example, to create a description list:

Function Glossary (props) {return ({props.items.map (item = > (/ / does not have `key`, React will issue a key warning {item.term} {item.description})});}

Key is the only attribute that can be passed to Fragment. Support for other properties, such as events, may be added in the future.

Note: abbreviated form, but currently some front-end tools do not support very well, projects created with create-react-app may not be able to compile. So it's normal to encounter this kind of situation.

On how to introduce and use React Fragment to share here, I hope that the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.