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

Question

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

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

这将节省大量输入，特别是在有很多 props 需要验证的组件上。

import React form 'react';

然后在我想使用它们时像 React.Component 一样调用它们。

这两种方法之间是否有任何性能差异，或者我应该选择我更喜欢的风格？

Answer 1

我会说存在 near-zero 性能差异。

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

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

对

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

但是，我通常倾向于解构版本（{} 版本），因为它 "feels" 比这些可能到处都是的大对象更整洁。

编辑

另一件值得注意的事情是，越来越多的库在编写模块方面做得越来越好，这些模块可以作为较大整体的较小部分导入——这对 ES6 的导入功能特别有效。

例如，如果您仅使用 lodash 中的 map，则像这样导入：

import map from 'lodash/map';

而不是这个：

import { map } from 'lodash';

将生成一个更小的最终编译文件（如果您的 browseifry/rollup/webpack/[插入本月风格] 设置正确），因为它只会引入执行地图所需的代码。而第一个带进了所有的东西。

Answer 2

随心所欲，但最重要的是 - 保持一致。

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

import React from 'react';

并像

一样使用它

class Welcome extends React.Component { ... }

ES6 best way to import React's named imports