之間的區別<React.Fragment>與 &lt;&gt;

Question

我想知道 <React.Fragment> 與 <> 在效率方面的區別？

Answer 1

我認為它基本相同，主要區別在於：

您可以像使用任何其他元素一樣使用 <></>，但它不支持鍵或屬性。

更多。

---

關於效率，恕我直言，應該沒有區別，至少沒有記錄。

這是一個簡短的實驗，如果您使用 React Profiler 進行檢查，在Main中使用Test1或Test2或多或少會提供相同的性能：

let array = [...new Array(1000)];

let Test1 = (props) => {
  return (
    <>
      <div>a</div>
      <div>b</div>
      <div>b</div>
    </>
  );
};

let Test2 = (props) => {
  return (
    <React.Fragment>
      <div>a</div>
      <div>b</div>
      <div>b</div>
    </React.Fragment>
  );
};

let Main = (props) => {
  return (
    <div>
      {array.map((x) => (
        <Test2 />
      ))}
    </div>
  );
};

export default function App() {
  return (
    <div>
      <Main />
    </div>
  );
}

Answer 2

這是同樣的事情。 <>只是一個簡短的語法。

Answer 3

<></>語法是<React.Fragmet>的簡寫，但略有不同。 您不能將鍵或屬性傳遞給<>

 someArray.map(item => ( // Without the `key`, React will fire a key warning <React.Fragment key={item.id}> <dt>{item.term}</dt> <dd>{item.description}</dd> </React.Fragment> ))

<>上面的例子是不可能的

檢查反應文檔以獲取更多信息

Answer 4

最終，這兩者都將“映射”到完全相同的事物。 所以恕我直言，效率沒有區別。