欧美午夜诱惑在线_一区二区三级片_国产成人综合v在线_国产91精品无码免费_高清综合亚洲三级_黄色软件下载观看_上萬網友分享国产精品高潮呻吟久久av心得_美女扒开尿眼无遮挡免费视频_好紧好湿好黄的视频免费_亚洲日韩欧美中字五月天

前言

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

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

Fragments出現(xiàn)動機

一種常見模式是組件返回一個子元素列表。以此 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 由此出現(xiàn)解決了這個問題。

React Fragment介紹與使用

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

理解起來就是在我們定義組件的時候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支持返回數(shù)組，知道這個特性的人不在少數(shù)。這一特性已經(jīng)可以減少不必要節(jié)點嵌套。

import React from 'react';

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

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

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

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

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

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

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

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：[email protected]進行舉報，并提供相關(guān)證據(jù)，查實之后，將立刻刪除涉嫌侵權(quán)內(nèi)容。

猜你喜歡

• 如何進行搭建Web服務(wù)器，過程是什么？

  前言在直播中，創(chuàng)建房間，獲取房間，都需要服務(wù)器，因此需要搭建Web服務(wù)器Web服務(wù)器能處理HTTP請求的服務(wù)器都可以叫Web服務(wù)器Node.js介紹Node.js什么時候出現(xiàn)，2009年，Ryan Dahl(瑞恩·達爾)在GitHub上發(fā)布了最初版本的部分Node.

• Element實現(xiàn)穿梭框出現(xiàn)卡頓問題怎么優(yōu)化，有哪些方案

  本文主要介紹了Element的穿梭框數(shù)據(jù)量大時點擊全選卡頓的解決方案，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

• this關(guān)鍵字的值取決什么，相關(guān)要點有哪些

  js中的this關(guān)鍵字平時在開發(fā)中使用時倒是也能正常應(yīng)用,但是對其使用和判斷并不能信手拈來,所以下面這篇文章主要給大家介紹了關(guān)于js中this關(guān)鍵字的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下

• jQuery獲取元素的數(shù)量的方法是什么，怎么操作

  jquery獲取元素數(shù)量的方法：1、利用“$(元素)”語句獲取指定的元素對象；2、利用length屬性來獲取指定元素對象中元素的數(shù)量，語法為“元素對象.length;”。

• Vue-cli4路由配置是怎樣，有哪些知識點

  Vue-router是Vue官方的路由插件，本文將結(jié)合實例代碼，介紹Vue-cli4路由配置，具有一定的參考價值，感興趣的小伙伴們可以參考一下