Javascript 导入材质ui组件的不同方法之间有什么区别？

通过阅读材料ui文档和在线示例，似乎有不同的方法导入相同的项目：

import TextField from 'material-ui/TextField';
// or
import TextField from '@material-ui/core/TextField';
// or
import { TextField } from '@material-ui/core';

---

导入的不同方式之间有什么区别？

主要区别发生在绑定时。使用命名的导入：

import { TextField } from '@material-ui/core';

拉入整个

@material ui/core

模块。这意味着您要捆绑模块中的所有内容（以及所有依赖项）。这里面有很多组件

进口：

import TextField from '@material-ui/core/TextField';

仅拉入

TextField

组件（及其依赖项）

---

我猜可以找到

TextField

的其他路径（如

material ui/TextField

）是为了与库的早期版本向后兼容。

主要区别在于捆绑时。使用命名的导入：

import { TextField } from '@material-ui/core';

拉入整个

@material ui/core

模块。这意味着您要捆绑模块中的所有内容（以及所有依赖项）。这里面有很多组件

进口：

import TextField from '@material-ui/core/TextField';

仅拉入

TextField

组件（及其依赖项）

---

我猜可以找到

TextField

的其他路径（如

material ui/TextField

）是为了与库的早期版本向后兼容。

这是因为当您导出默认TextField时，它们的导出方式不同。您可以像这样导入

TextField

从'@material ui/core/TextField'导入TextField'
因为一个文件中只能导出一次默认内容

但是如果你
导出const TextField
你应该像这样导入它

import { TextField } from '@material-ui/core';

这是因为当您导出默认文本字段时，它们的导出方式不同。您可以像这样导入
TextField
s

从'@material ui/core/TextField'导入TextField'
因为一个文件中只能导出一次默认内容

但是如果你
导出const TextField
你应该像这样导入它

import { TextField } from '@material-ui/core';