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

Ami*_*ian 5 javascript import reactjs babeljs es6-module-loader

PropTypes我想知道在 ES6 中导入 React 的两种名为 import ( , )的方法中哪一种Component是最好的。

第一的

import React, {PropTypes, Component} from 'react';
Run Code Online (Sandbox Code Playgroud)

这将节省大量输入,特别是在有大量道具需要验证的组件上。

第二

import React form 'react';
Run Code Online (Sandbox Code Playgroud)

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

两种方法之间是否存在性能差异,或者我应该选择我更喜欢的风格?

Chr*_*ris 2

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

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

import { map } form 'lodash';
import { map } from 'underscore'; // oh no map-clash
Run Code Online (Sandbox Code Playgroud)

import lodash from 'lodash';
import underscore from 'underscore'; // lodash.map v underscore.map
Run Code Online (Sandbox Code Playgroud)

然而,我通常倾向于解构版本(版本{}),因为它“感觉”比这些可能到处都是的大物体更整洁。

编辑

另一件值得注意的事情是,越来越多的库越来越擅长编写可以作为较大整体的较小部分导入的模块 - 这对于 ES6 的导入功能特别有效。

例如,如果您仅使用mapfrom lodash,则像这样导入:

import map from 'lodash/map';
Run Code Online (Sandbox Code Playgroud)

而不是这个:

import { map } from 'lodash';
Run Code Online (Sandbox Code Playgroud)

将导致最终编译的文件小得多(如果您正确设置了 browserifry/rollup/webpack/[插入本月风格]),因为它只会引入执行 map 所需的代码。而第一个带来了所有的东西。