导入 React 与 React，{ 组件}

IT技术 javascript reactjs ecmascript-6 react-jsx
2021-04-13 13:25:05

Import React 对比 Import React, { Component }

哪个更好，为什么？

或者除了以后编写更少的代码之外没有任何区别？

写入是否{ Component }意味着它只导入 Component 对象？

3个回答

import React, { Component }让你做class Menu extends Component而不是class Menu extends React.Component. 它减少了 React 命名空间的输入和重复，这通常是一种理想的现代编码约定。

此外，像 Webpack 2 和 Rollup 这样的工具会进行“摇树”，这意味着任何未使用的导出都不会捆绑到您的最终代码中。使用import React/React.Component你保证所有 React 的源代码都将被捆绑。使用import { Component }，一些工具只会捆绑使用Component该类所需的代码，不包括 React 的其余部分。

上一段在这种特定情况下是无关紧要的，因为你总是需要在当前命名空间中有 React 来编写 JSX，但在其他情况下只导入你需要的确切module可能最终会导致更小的捆绑代码。

除此之外，这完全是个人喜好。

@epiqueras 您正在导入所有内容，但是 Component 的导入方式您不需要将其引用为React.Component，而是只需Component
2021-06-01 13:25:05
将 React 命名空间上的任何内容作为您可以使用的变量导入只是一种简写。import React, { PropTypes, Component } from 'react'如果你愿意，你也可以。如果这没有回答您的问题，请编辑问题以使其更具体，StackOverflow 不适合来回聊天类型的答案。
2021-06-04 13:25:05
所以我还在导入 PropTypes 和 React 附带的所有其他东西？这不像我只是导入组件？
2021-06-07 13:25:05
仅供参考，即使你只是在做{ Component } from 'react'，你的打包器仍然会捆绑整个依赖，所以如果你担心大小，这不是减少它的方法。
2021-06-18 13:25:05
@安德鲁L。这种类型的导入有名称吗？
2021-06-21 13:25:05

这些是命名导入或命名空间导入。他们所做的基本上是将module的内容复制到命名空间中，允许：

import React, { Component } from 'react';

class SomeComponent extends Component { ... }

通常，我们会扩展React.Component，但是由于 Component module已导入到命名空间中，因此我们只需使用Component,React.来引用它，就不需要了。所有 React module都被导入，但大括号内的module是以这样一种方式导入的，即React访问时不需要命名空间前缀。

TLDR；

这完全是个人喜好。

只是一个注释…

import React, { Component }让你做class Menu extends Component 而不是class Menu extends React.Component. 打字少了……

如果你想少打字，那么除了 React 之外不要导入 Component。

import React, { Component } from 'react';
class Menu from Component {

是更多的打字比：

import React form 'react';
class Menu from React.Component {

即使您考虑自动完成。;)

其它你可能感兴趣的问题
上一篇无法在类组件 React.js 中使用 useState 下一篇如何使用 ReactJs 将 json 数据显示为表格