react 中的 Fragment

今天說的這一小節超級簡單，但是呢，不說還不行，因為在實際開發項目當中你會確確實實的發現有這樣一個使用場景，很多人都會寫，所以說盡管不影響我們的實際開發，但別人確實會這樣操作，為了能更好的看清項目代碼，稍微提一嘴吧。

標簽渲染

Fragment 標簽的使用啊超級簡單，就?<Fragment></Fragment>?包裹一下就可以了。

首先我們現在簡單的寫一個組件，然后直接掛載在根組件下面。

// 創建外殼組件
import React, { Component } from "react";

// 創建并暴露APP組件
export default class App extends Component {

  render() {
    return (
      <div>
        <h1>我是??.</h1>
      </div>
    )
  }
}

我們 F12 看一下 Elements。

我們看到，有一個 id 是 root 的 div 標簽，這個很好理解，就是掛載的 div，也就是 index.html 文字中的那個 div 標簽。

那下面那個 div 是哪個？

沒錯，是我們自己寫組件包裹的，這里樣一看，啊，就為了展示一個 h1 標簽就嵌套了那么多 div ，太麻煩了，這里可以省略嗎？ 可以，因為組件里面這個 div 里面只包含了一個標簽啊，所以說組件中的 div 是可以省略掉的，但是如果這個組件中有兩個標簽，那組件根節點的 div 就不允許省略！！！！

那不省略的話，每次 react 渲染完，每個組件都會多渲染一個 根 div 的話層級結構會不會顯得很亂啊！答案是會的，能不能解決一下子？可以的！這時候就使用到了我們今天說的 Fragment 標簽。

Fragment 標簽

怎么理解哈，你就想象，Fragment 標簽 就是一個簡單的標簽，在 react 項目中就充當組件根節點的 div 使用。只要使用 Fragment 標簽，那么在 react 中渲染的時候，都會被自動忽略掉，不會被渲染。

我們修改一下組件的代碼，使用 Fragment 標簽，首先 Fragment 標簽需要引入才可以使用的。

// 創建外殼組件
import React, { Component, Fragment } from "react";

// 創建并暴露APP組件
export default class App extends Component {

  render() {
    return (
      <Fragment>
        <h1>我是??.</h1>
      </Fragment>
    )
  }
}

我們將組件根標簽 div 替換成了 Fragment 標簽，我們看一下效果：

我們看到哈，我們使用了 Fragment 之后呢，組件根 div 沒有了，但是呢，我們寫的 Fragment 標簽也沒有對應的渲染，而是自動忽略掉了。這就是 Fragment 的作用，你需要將幾個組件包裹，但是有不想多余的渲染出真實Dom，就可以使用 Fragment 標簽包裹。

當然，很多開發者在開發 react 的時候，像這種地方，他不會使用 div，當然了也不會使用 Fragment 標簽，而是?<></>?空標簽。

我們改一下代碼哈！不使用 Fragment 標簽了，直接寫空標簽看一下有什么作用：

// 創建外殼組件
import React, { Component, Fragment } from "react";

// 創建并暴露APP組件
export default class App extends Component {

  render() {
    return (
      <>
        <h1>我是??.</h1>
      </>
    )
  }
}

我們看一下效果：

我們看到哈，沒有使用 Fragment 標簽，只是用 空標簽 的話，效果和使用 Fragment 標簽是一摸一樣的！而且有沒有發現啊，如果使用 空標簽 的話，還少了引入 Fragment 標簽的步驟，更方便了，所以說很多程序員選擇使用空標簽的方式作為組件的根節點。

但是 Fragment 標簽和 空標簽 是有區別的。

Fragment?標簽和?<></>?區別

想象一下，如果我們需要遍歷一個標簽，我們使用 Fragment 標簽包裹，在 Fragment 標簽寫 for 循環可以嗎？可以！因為 Fragment 可以使用一個參數，就是?key。遍歷的時候需要寫唯一的 key 值吧？Fragment 允許你使用key。

有人問我寫的 name、或者是 class 不可以嗎？答案是不可以！

為啥不可以哈，Fragment這個標簽啊，他不會渲染真實的 Dom，你可以寫啊，但是他沒意義啊！因為他不會被渲染出來。所以說他只支持一個樹形，就是 key ，目的就是讓你循環使用的。

<></>?就不行了，他什么屬性也不讓你用，所以說，空標簽一般只作為一個容器包裹其他標簽使用，不能進行循環判斷等任何操作。

所以說：如果僅僅是需要一個標簽包裹其他的標簽，可以使用?真實Dom( div )、?Fragment?和?空標簽，但是需要使用循環，不能使用空標簽！