我何时应该使用带括号的括号

Zea*_*ith 7 javascript ecmascript-6 reactjs webpack

我有两个文件,第一个是todoHelper.js

它有 export const addTodo = (list, item) => [...list, item]

后来我想addTodo在另一个文件中使用,我只是这样做import {addTodo} from './todoHelpers'

但我也看到人们做出口违约而不仅仅是出口.有什么区别?

Shu*_*tri 8

每个文件只能有一个导出默认值,因此当您执行导出默认值时

export default AddTodo = (list, item) => [...list, item]
Run Code Online (Sandbox Code Playgroud)

你可以导入它

import MyAddTodo from './todoHelpers'
Run Code Online (Sandbox Code Playgroud)

由于babel知道您正在尝试访问默认组件,因此您可以通过任何名称在您的文件中访问它

现在假设你这样做

export const AddTodo = (list, item) => [...list, item]
Run Code Online (Sandbox Code Playgroud)

你可以在你的文件中有多个这样的导出

export const AddTodo =(list,item)=> [... list,item] export const DeleteTodo =(list,item)=> [... list,item]

当你导入时,你需要对它们进行解构

import {AddTodo, DeleteTodo}from './todoHelpers'
Run Code Online (Sandbox Code Playgroud)

既然你有多个这样的出口,那么如果你通过不同的名字访问,babel就不会知道你要访问哪个组件

import {MyAddTodo, MyDeleteTodo}from './todoHelpers'
Run Code Online (Sandbox Code Playgroud)

如果你想这样做,你将不得不按原样导入它们,并改变它们的名称

import {AddTodo as MyAddTodo, DeleteTodo as MyDeleteTodo}from './todoHelpers'
Run Code Online (Sandbox Code Playgroud)

因此,作为一般实践,您将default export主要组件和其他可以正常导出或当您只有一个组件需要从文件导出时,您可以选择任何您想要的但是一个很好的方法将export它作为默认.

  • 是的,您可以在有一次导出时使用它.虽然由您决定,但限制是每个文件只能有一个默认导出 (2认同)