快捷導(dǎo)航

React Fragment介紹與使用詳解

更新時(shí)間：2021年11月10日 16:26:58 作者：_Boboy

本文主要介紹了React Fragment介紹與使用詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

前言

在向 DOM 樹(shù)批量添加元素時(shí)，一個(gè)好的實(shí)踐是創(chuàng)建一個(gè)document.createDocumentFragment，先將元素批量添加到
DocumentFragment 上，再把 DocumentFragment 添加到 DOM 樹(shù)，減少了 DOM操作次數(shù)的同時(shí)也不會(huì)創(chuàng)建一個(gè)新元素。

和 DocumentFragment 類(lèi)似，React 也存在 Fragment 的概念，用途很類(lèi)似。在 React 16之前，F(xiàn)ragment 的創(chuàng)建是通過(guò)擴(kuò)展包 react-addons-create-fragment 創(chuàng)建，而 React 16 中則通過(guò)<React.Fragment></React.Fragment> 直接創(chuàng)建 ‘Fragment'。

Fragments出現(xiàn)動(dòng)機(jī)

一種常見(jiàn)模式是組件返回一個(gè)子元素列表。以此 React 代碼片段為例：

class Table extends React.Component {
  render() {
    return (
      <table>
        <tr>
          <Columns />
        </tr>
      </table>
    );
  }
}

< Columns /> 需要返回多個(gè) 元素以使渲染的 HTML 有效。如果在 < Columns /> 的 render() 中使用了父 div，則生成的 HTML 將無(wú)效。

class Columns extends React.Component {
  render() {
    return (
      <div>
        <td>Hello</td>
        <td>World</td>
      </div>
    );
  }
}

得到一個(gè) < Table /> 輸出：

<table>
  <tr>
    <div>
      <td>Hello</td>
      <td>World</td>
    </div>
  </tr>
</table>

Fragments 由此出現(xiàn)解決了這個(gè)問(wèn)題。

React Fragment介紹與使用

React.Fragment 組件能夠在不額外創(chuàng)建 DOM 元素的情況下，讓 render() 方法中返回多個(gè)元素。一個(gè)常見(jiàn)模式是一個(gè)組件返回多個(gè)元素。Fragments 允許你將子列表分組，而無(wú)需向 DOM 添加額外節(jié)點(diǎn)。

理解起來(lái)就是在我們定義組件的時(shí)候return里最外層包裹的div往往不想渲染到頁(yè)面，那么就要用到我們的Fragment組件了。就和vue的<template ></ template >.

render() {
  return (
    <React.Fragment>
      Some text.
      <h2>A heading</h2>
    </React.Fragment>
  );
}

你也可以使用其簡(jiǎn)寫(xiě)語(yǔ)法 <></>。

render() {
  return (
    <>
      Some text.
      <h2>A heading</h2>
    </>
  );
}

另外react 16開(kāi)始， render支持返回?cái)?shù)組，知道這個(gè)特性的人不在少數(shù)。這一特性已經(jīng)可以減少不必要節(jié)點(diǎn)嵌套。

import React from 'react';

export default function () {
    return [
        <div>1</div>,
        <div>2</div>,
        <div>3</div>
    ];
}

<React.Fragment> 與 <>區(qū)別

<></> 語(yǔ)法不能接受鍵值或?qū)傩裕?lt;React.Fragment>可以。

使用顯式 <React.Fragment> 語(yǔ)法聲明的片段可能具有 key。一個(gè)使用場(chǎng)景是將一個(gè)集合映射到一個(gè) Fragments 數(shù)組 - 舉個(gè)例子，創(chuàng)建一個(gè)描述列表：

function Glossary(props) {
  return (
    <dl>
      {props.items.map(item => (
        // 沒(méi)有`key`，React 會(huì)發(fā)出一個(gè)關(guān)鍵警告
        <React.Fragment key={item.id}>
          <dt>{item.term}</dt>
          <dd>{item.description}</dd>
        </React.Fragment>
      ))}
    </dl>
  );
}

key 是唯一可以傳遞給 Fragment 的屬性。未來(lái)可能會(huì)添加對(duì)其他屬性的支持，例如事件。

注意：簡(jiǎn)寫(xiě)形式<></>，但目前有些前端工具支持的還不太好，用 create-react-app 創(chuàng)建的項(xiàng)目可能就不能通過(guò)編譯。所以遇到這種情況很正常。

到此這篇關(guān)于React Fragment介紹與使用詳解的文章就介紹到這了,更多相關(guān)React Fragment內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: