import时加{}和不加{}，有什么区别？

在React中，当你从一个模块中导入变量、函数或组件时，import语句中的大括号{}用于区分默认导出（default export）和命名导出（named export）。

1. 默认导出（default export）：每个模块可以有一个默认导出，它可以是一个变量、函数或组件。当你导入默认导出时，不需要使用大括号{}。例如：

   // MyComponent.js
   export default function MyComponent() {
     // ...
   }
   
   // App.js
   import MyComponent from './MyComponent';
   

   在这个例子中，MyComponent.js中的MyComponent函数是默认导出。在App.js中，我们可以直接导入MyComponent，而不需要使用大括号{}。

2. 命名导出（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语句中的大括号{}用于区分默认导出和命名导出。当导入默认导出时，不需要使用大括号{}；当导入命名导出时，需要使用大括号{}。