从React和React，{Fragment}导入React的Fragment有什么区别？

Question

什么之间的区别import React from 'react'，并import React { Fragment } from 'react'在背景下<React.Fragment>，<Fragment>和<>？

我的意思是，当我们导入的内容发生React并{ Fragment }从一个模块在同一行？

我们是否创建的实例，<Fragment>而这只是后台的几百行代码？

还是这只是正常现象，每个人都可以做到而不会降低性能？

React官方博客文章提到您可以做到这一点const Fragment = React.Fragment，它们在示例中使用。

但为什么？

Answer 1

因此，假设您有一个对象。

let object = {
   foo: '1',
   bar: '2',
};

为了使用该值，foo您可以执行以下操作

• object.foo
• let { foo } = object

这两者是相同的，后面提到的方法称为销毁，这是在JavaScript ES6版本中引入的。

现在成为主题

在和<>的上下文中，从“反应”导入React和从“反应”导入React {片段}有什么区别？

想象React作为具有以下功能，例如物体Fragment在这种情况下。您可以通过以下方式访问它

1-第一种方式

 import React from 'react';
 <React.Fragment></React.Fragment>

2

import React, { Fragment } from 'react';
<Fragment></Fragment>

现在，在第二个途径，这是基本上所有进口反应功能，还破坏功能，从React它Fragment。因此，您不必React.Fragment一次又一次地写。

3

<></>

这是babel功能，编译时babel会将其转换<></>为<React.Fragment></React.Fragment>

Answer 2

这基本上是语法糖：

import React, { Fragment } from 'react'

将允许您编写以下内容：

class MyComponent extends React.Component {

 render () {
   return (
     <Fragment>
       <div className="fragment1">Fragment 1</div>
       <div className="fragment2">Fragment 2</div>
     <Fragment>
   ) 
 }
}

而不必显式地编写React.Fragment。请注意，如果您需要的唯一导入是React.Component和，您也可以编写以下内容React.Fragment：

import { Component, Fragment } from 'react' 

class MyComponent extends Component {

 render () {
   return (
     <Fragment>
       <div className="fragment1">Fragment 1</div>
       <div className="fragment2">Fragment 2</div>
     <Fragment>
   ) 
 }
}

当使用模块捆绑器（例如 Webpack）时，这也可能变得相关，因此你的捆绑器只会导入所需的依赖项，并且可能会导致捆绑包更小（也就是你的应用程序加载速度更快）。查看Tree Shaking了解更多详细信息。这最终取决于导入的包如何导出其模块，正如上面的回复中提到的，目前它可能对 React 没有任何好处，但其他库可能会利用该机制。尝试将进口量保持在严格的最低限度通常是一个好习惯。