什么之间的区别import React from 'react'，并import React { Fragment } from 'react'在背景下<React.Fragment>，<Fragment>和<>？
我的意思是当我们从module导入React并{ Fragment }在同一行中时会发生什么？
我们是否创建了实例，<Fragment>这只是引擎盖下的另外几百行代码？
或者这只是正常的，每个人都可以做到这一点而不会出现性能下降？
React 官方博文提到你可以这样做const Fragment = React.Fragment，他们在他们的例子中使用了 in。
但为什么？
所以假设你有一个对象。
let object = {
foo: '1',
bar: '2',
};
为了使用该值，foo您可以执行以下操作
object.foolet { foo } = object这两者是一样的，后面提到的方法叫做destructing，它是在javascript ES6 版本中引入的。
现在进入主题
import React from 'react' 和 import React { Fragment } from 'react' in , and <> 有什么区别？
想象React为具有以下特征的对象，例如Fragment在这种情况下。您可以通过以下方式访问它
1-第一种方式
import React from 'react';
<React.Fragment></React.Fragment>
2-
import React, { Fragment } from 'react';
<Fragment></Fragment>
现在，在第二个途径，这是基本上所有进口react功能，还破坏功能，从React它Fragment。所以你不必React.Fragment一次又一次地写。
3-
<></>
这是一个babel特性，babel在编译的时候会把它转换<></>成<React.Fragment></React.Fragment>
这基本上是语法糖：
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.Componentand ，您还可以编写以下内容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>
)
}
}
当使用module捆绑器（例如 Webpack）时，这也可能变得相关，因此您的捆绑器将仅导入所需的依赖项，并且可能会导致捆绑包更小（也就是您的应用加载速度更快）。有关更多详细信息，请查看摇树。这最终取决于导入的包如何导出其module，如上面的回复中所述，它可能对 React 没有好处——目前——但其他库可能会利用该机制。尝试将您的导入保持在最低限度通常是一个好习惯。
<></>语法不支持键或属性。当元素被迭代时，它会抛出警告消息“列表中的每个子元素都应该有一个唯一的“键”属性”。
例如 ：
{props.items.map(item => (
<>
<dt>{item.term}</dt>
<dd>{item.description}</dd>
</>
))}
在此处查看文档https://reactjs.org/docs/fragments.html#keyed-fragments
嗯，没有性能上的缺点，这只是与额外的标记有关。我们Fragment像往常一样进行命名导出Component。只要你关心性能，我们已经导入了，react这意味着完整的 react 包因为Component, Fragment在 React Tree 中导出组件时不仅仅需要我们。我们实际上并未导入 react 包中的底层依赖项，但它们在我们的组件中使用