为什么在React中需要默认导出?

时间:2018-11-28 17:41:47

标签: javascript reactjs jsx

我知道有两种出口,一种叫做默认出口,另一种是默认出口。

// utils.js
const addOne = (a) => a+1;
export default addOne;
export const subOne = (a) => a- 1;

//app.js
import plusOne, {subOne} from './utils.js'

对于为什么我们需要默认导出,我感到很困惑,它只能使用一次。 唯一的原因是命名导出在本地提供名称,默认导出可以重命名。 但是,如果我们有需求,也许我们需要重复使用它。

2 个答案:

答案 0 :(得分:4)

不需要默认导入。您可以全部使用命名导出。在您的情况下,当您导出一堆实用程序函数时,使用命名的导出可能会更好。但是,如果只需要导出一个函数(通常是一个类),则默认导出是理想的。

答案 1 :(得分:2)

基于个人经验,我可以想到一个实际的实际示例,在该示例中,您既有一个命名的导出又有一个的默认导出,那就是您要测试包装好的React组件的时候在高阶组件中。

class Hello extends Component {
  //
}

export default connect(mapStateToProps, mapDispatchToProps)(Hello);

如果您正在测试此组件,则尝试从该文件导入默认导出会遇到各种问题。因此,您只需要导出组件即可,并且可以为此使用命名导出:

export class Hello extends Component {
  //
}

export default connect(mapStateToProps, mapDispatchToProps)(Hello);