反应组件的导出语法

Question

大家好我刚加入这个论坛，我必须说使用它非常有帮助...非常感谢。但是我想知道它们之间的区别：

export const Hello = (props)=>{   return<h1>Hello {props.name}</h1>;   } 

AND

export default ({ name }) => <h1>Hello {name}!</h1>;

出于某种原因，第一个选项一直让我的代码出错。 BTW这两个组件的名称是＆＃39; Hello＆＃39;。

Answer 1

这里要解开几件事。

1。 export vs export default

当您像第一个示例一样导出某个名为const的内容时，它允许您像这样import：

import { Hello } from  './yourFile'

如果您将某些内容导出为默认值，则可以将其导入为：

import Hello from './yourFile'

在第一个示例中，Hello必须与要导出的const的名称匹配，在第二个示例中，Hello是您为导入的默认值指定的名称，因此可能是你想要的任何东西（虽然惯例是你保持一致以澄清）。

2。 (props) vs ({name})

您在此处所做的是定义将作为参数传递给组件的内容。 第一个例子是使用整个props对象，所以你需要在你的组件中做props.name，第二个是使用对象解构从你的输入参数（仍然是道具）解包属性name 。

第二个优点是，当您回到组件时，它会更明确一些，您希望使用哪些属性，它可以让您在组件中更简洁。缺点是，如果你需要打开很多属性，它可能会更加冗长。

3。 => { return xyz } vs =>

这只是一个语法差异，它们在你的例子中做同样的事情，但第二个是更苗条的。 第一个基本上是使用花括号定义一个方法体，它允许您在返回组件HTML之前执行其他操作，例如，您可以在那里分配一些变量。 第二个更简洁，但它是返回内容和花括号的简写，我个人认为如果你不需要在方法体内做任何其他事情，那就更好了。 第三种方法是编写=> (<h1>Hello {name}!</h1>)，它与第二个例子一样，只是用括号表示！

Answer 2

您的2个导出之间的唯一功能差异在export const Hello = ...和export default ...

之间

使用export default时，您基本上是这样说：导入文件时提供此值。所以你会在另一个文件中使用

import Hello from './Hello'

使用export const Hello = ...时，您导出Hello作为导出对象的属性。然后你会使用

import { Hello } from './Hello' 

或

import HelloFile from './Hello'
...
const Hello = HelloFile.Hello;

对于其他差异，您可以查看dougajmcdonald的答案，如果您想进一步记录自己，可以查看arrow functions和destructuring assignment，但基本上您的2段代码正在执行完全相同的事情