Question

我想知道在ES6中导入React命名导入（PropTypes，Component）的两种方式中哪一种是最好的。

第一

import React, {PropTypes, Component} from 'react';

这会在有很多要验证的道具的组件上节省大量的打字。

第二

import React form 'react';

然后在我想使用它们时将它们称为React.Component。

两种方法之间是否存在性能差异，或者我应该选择哪种风格更为舒适？

Answer 1

无论您喜欢什么，但最重要的是 - 保持一致。

React周围的社区和官方文档更喜欢第二种选择，这也是我个人的偏好，因为它更具描述性。

import React from 'react';

并像

一样使用它

class Welcome extends React.Component { ... }

Answer 2

我想说性能差异几乎为零。

对我来说，后者的主要优点是维护命名空间：这是一个人为的例子，因为你显然不会包含lodash和下划线 -

import { map } form 'lodash';
import { map } from 'underscore'; // oh no map-clash

VS

import lodash from 'lodash';
import underscore from 'underscore'; // lodash.map v underscore.map

然而，我通常倾向于破坏版本（{}版本），因为它比任何地方的大型物体“感觉”更整洁。

修改

另外值得注意的是，越来越多的库在编写可以作为更大整体的较小部分导入的模块方面变得越来越好 - 这对于ES6的导入功能尤其有效。

例如，如果您只使用lodash中的map，请按以下方式导入：

import map from 'lodash/map';

而不是：

import { map } from 'lodash';

将导致一个小得多的最终编译文件（如果你正确设置了browseifry / rollup / webpack / [插入月份的味道]），因为它只会带来执行map所需的代码。而第一个带来所有的东西。

ES6导入React的命名导入的最佳方式

第一

第二

2 个答案: