import时加{}和不加{},有什么区别?
在React中,当你从一个模块中导入变量、函数或组件时,import语句中的大括号{}用于区分默认导出(default export)和命名导出(named export)。
默认导出(default export):每个模块可以有一个默认导出,它可以是一个变量、函数或组件。当你导入默认导出时,不需要使用大括号{}。例如:
// MyComponent.js
export default function MyComponent() {
// ...
}
// App.js
import MyComponent from './MyComponent';
在这个例子中,MyComponent.js中的MyComponent函数是默认导出。在App.js中,我们可以直接导入MyComponent,而不需要使用大括号{}。
命名导出(named export):一个模块可以有多个命名导出。当你导入命名导出时,需要使用大括号{}。例如:
// utils.js
export function funcA() {
// ...
}
export function funcB() {
// ...
}
// App.js
import { funcA, funcB } from './utils';
在这个例子中,utils.js中的funcA和funcB函数是命名导出。在App.js中,我们需要使用大括号{}来导入这两个函数。
总之,在React中,import语句中的大括号{}用于区分默认导出和命名导出。当导入默认导出时,不需要使用大括号{};当导入命名导出时,需要使用大括号{}。