React Fragment介紹與使用詳解

Posted on by

前言

在向 DOM 樹批量添加元素時，一個好的實踐是創建一個document.createDocumentFragment，先將元素批量添加到
DocumentFragment 上，再把 DocumentFragment 添加到 DOM 樹，減少瞭 DOM操作次數的同時也不會創建一個新元素。

和 DocumentFragment 類似，React 也存在 Fragment 的概念，用途很類似。在 React 16之前，Fragment 的創建是通過擴展包 react-addons-create-fragment 創建，而 React 16 中則通過<React.Fragment></React.Fragment> 直接創建 ‘Fragment’。

Fragments出現動機

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

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

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

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

得到一個 < Table /> 輸出：

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

Fragments 由此出現解決瞭這個問題。

React Fragment介紹與使用

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

理解起來就是在我們定義組件的時候return裡最外層包裹的div往往不想渲染到頁面，那麼就要用到我們的Fragment組件瞭。就和vue的<template ></ template >.

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

你也可以使用其簡寫語法 <></>。

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

另外react 16開始， render支持返回數組，知道這個特性的人不在少數。這一特性已經可以減少不必要節點嵌套。

import React from 'react';

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

<React.Fragment> 與 <>區別

<></> 語法不能接受鍵值或屬性，<React.Fragment>可以。

使用顯式 <React.Fragment> 語法聲明的片段可能具有 key。一個使用場景是將一個集合映射到一個 Fragments 數組 – 舉個例子，創建一個描述列表：

function Glossary(props) {
  return (
    <dl>
      {props.items.map(item => (
        // 沒有`key`，React 會發出一個關鍵警告
        <React.Fragment key={item.id}>
          <dt>{item.term}</dt>
          <dd>{item.description}</dd>
        </React.Fragment>
      ))}
    </dl>
  );
}

key 是唯一可以傳遞給 Fragment 的屬性。未來可能會添加對其他屬性的支持，例如事件。

註意：簡寫形式<></>，但目前有些前端工具支持的還不太好，用 create-react-app 創建的項目可能就不能通過編譯。所以遇到這種情況很正常。

到此這篇關於React Fragment介紹與使用詳解的文章就介紹到這瞭,更多相關React Fragment內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：