我见过两种访问方式Component
:
import React from 'react';
class Foo extends React.Component {
...
}
和
import React, { Component } from 'react';
class Foo extends Component {
...
}
两者之间有什么区别(例如,性能方面)?
我见过两种访问方式Component
:
import React from 'react';
class Foo extends React.Component {
...
}
和
import React, { Component } from 'react';
class Foo extends Component {
...
}
两者之间有什么区别(例如,性能方面)?
简短的回答:没有。
从另一面看它可能会使理解更容易。
如果您想象 react module本身 - 它可能看起来像这样。
export const Component = () => {}; // the component class/function
const React = { Component: Component }; // the main react object
export default React;
注意使用export
.
的默认 export
是react,所以它是在这样的另一个module访问(或进口):
import React from 'react';
Component 是一个命名的 export: Component
,因此可以通过以下方式在另一个module中访问:
import { Component } from 'react';
但是在这种情况下 Component 也附加到 React 对象。因此,您可以通过以下任何一种方式使用导入:
import React, { Component } from 'react';
class MyComp extends React.Component {}
class MyOtherComp extends Component {}
还有几点值得一提:
import Cat from 'react';
。import { Component as Cat } from 'react';
在第一个示例中,您通过 获得了整个导出import React
,并Component
通过 react import调用。在第二个示例中,您Component
从 React 单独导入。这就是为什么你不需要写React.Component
. 它是相同的,但导入方式不同。
不,这只是您导入本地命名空间的问题。如果你在本地已经有一个叫做 Component 的东西,你就不能做后者。除此之外,这只是偏好,无论您是要列出导入的所有内容,还是能够轻松地在使用站点上查看某些内容来自哪个module。