"<i>React:<\/i>反應：<\/b><React.Fragment> <i>vs array<\/i>與數組<\/b>"

Question

我正在閱讀 React 文檔並被Fragments<\/a>主題弄糊塗了。 既然我們基本上可以在 React 中返回一個數組，那么在什么情況下需要<Fragements \/><\/code>呢？

這是一個代碼示例：

const ReturnArray = () => {
  const items = [
    <div key={1}>Item 1</div>,
    <div key={2}>Item 2</div>,
    <div key={3}>Item 3</div>,
  ]
  return items
}

const ReturnFragments = () => {
  const items = 
    <React.Fragment>
      <div key={1}>Item 1</div>
      <div key={2}>Item 2</div>
      <div key={3}>Item 3</div>
    </React.Fragment>

  return items
}

Answer 1

官方文件<\/a>說

使用數組表示法與普通 JSX 有一些令人困惑的區別：

1. 數組中的子項必須用逗號分隔。

2. 數組中的子項必須有一個鍵才能防止 React 的鍵警告。

3. 字符串必須用引號括起來。

   所以為了簡單起見，React 提供了 Fragment 組件，可以用來代替數組。

   考慮我們如何使用數組包裝多個孩子

   以及如何使用 Fragments 來實現。
   直接取自官方文檔。
   片段也可以寫成如下。
   

Answer 2

在返回語句中使用片段而不是數組有兩個主要優點

1. 與其他組件類似的簡單語法，因此您不必擔心返回逗號分隔值、將字符串括在引號中等<\/li>
2. 片段可以采用諸如鍵之類的屬性，這在您從地圖中返回數據時通常很重要。 你不能使用數組來做到這一點。<\/li><\/ol>

   例子

Answer 3

片段和數組旨在解決不同的用例，並以一種重要的方式表現不同。

如果省略key<\/code>屬性，片段不會發出警告，而數組會發出警告。<\/strong>

如果您的組件返回多個靜態子級，則返回一個片段<\/strong>。

<Fragment>
  <li>One advantage of our product is lorem</li>
  <li>Another is ipsum!</li>
</Fragment>

Answer 4

當你創建一個新組件時，render 方法需要返回一個且只有一個元素，所以通常它是許多元素的包裝器，而不是創建一個無用的 div 到 dom，你可以使用片段組件。

引用 React Fragments 文檔：

React 中的一個常見模式是組件返回多個元素。 片段讓您可以對子列表進行分組，而無需向 DOM 添加額外的節點。

沒有碎片

帶碎片