什么时候应该在导入中使用方括号

Question

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

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

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

但是我也看到人们在默认情况下执行导出而不只是导出。有什么区别？

Answer 1

每个文件只能有一个导出默认值，因此当您导出默认值时，例如

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

您可以像导入

import MyAddTodo from './todoHelpers'

由于babel知道您正在尝试访问默认组件，因此可以使用任何名称在文件中访问它

现在假设你做

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

您可以在文件中包含多个此类导出，例如

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

当您导入时，您将需要对它们进行解构，例如

import {AddTodo, DeleteTodo} from './todoHelpers'

现在，由于您有多个此类导出，因此babel将不会知道您要访问的是哪个组件，如果您使用不同的名称（例如

import {MyAddTodo, MyDeleteTodo} from './todoHelpers'

如果要执行此操作，则必须按原样导入它们，并且它们会更改其名称，例如

import {AddTodo as MyAddTodo, DeleteTodo as MyDeleteTodo} from './todoHelpers'

因此，按照常规做法，您将default export可以正常导出主要组件，而其余组件则可以正常导出，或者当您仅需要从文件导出一个组件时，您可以选择所需的任何东西，但是export默认情况下会采用一种不错的方法。