从React导入React的片段和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.Component 和 反应。碎片

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

所以假设你有一个物体。

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

foo 您可以执行以下操作

• object.foo
• let { foo } = object

现在开始讨论

在和的上下文中,import-React from'React'和import-React{Fragment}from'React'之间有什么区别;?

想象 React 作为具有以下特征的对象,例如 Fragment

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

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

现在在第二种方法中,这基本上是导入所有React特性,并从 哪个是 碎片 . 所以你不用写了 React.Fragment

3-

<></>

这是一个babel功能,编译时将babel转换为 <></> 把这个放进 <React.Fragment></React.Fragment>

好吧,没有性能的缺点,这只是与额外的加价有关。我们有指定的出口 Fragment 喜欢 Component 我们通常都是这样。只要你关心性能,我们已经从 react 这意味着完整的反应包,因为 Component, Fragment 在React树中导出组件时需要。在react包中有一些不需要导入的依赖项,但它们在我们的组件中使用

<></>

例如:

{props.items.map(item => (
    <>
      <dt>{item.term}</dt>
      <dd>{item.description}</dd>
    </>
))}

在此处查看文档 https://reactjs.org/docs/fragments.html#keyed-fragments