let import React from 'react/addons' 和 import { PropTypes } from 'react/addons' 的区别

Question

两者有什么区别：

import React from 'react/addons';
let {PropTypes} = React;

对比

import React, { PropTypes } from 'react/addons';

是否有任何我们应该遵循的适当约定？

Answer 1

通常，使用Babel 的 REPL将它们编译为 ES5是了解正在发生的事情的好方法。

import React from 'react/addons';
let {PropTypes} = React;

变成：

var _addons = require('react/addons');

var _addons2 = _interopRequireDefault(_addons);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var PropTypes = _addons2.default.PropTypes;

相比：

import React, { PropTypes } from 'react/addons';

变成：

var _addons = require('react/addons');

var _addons2 = _interopRequireDefault(_addons);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

每个中的前两个语句是相同的。import 语句成为对 的调用require，然后有一个运行时辅助函数从模块内部提取适当的值。

在这一点上它变得有趣。示例 1 使用对象解构PropTypes作为新变量引入。Babel 引入了新变量作为指向适当属性的引用。

var PropTypes = _addons2.default.PropTypes;

那么为什么示例 2 中缺少这行代码呢？事实上，如果您查看代码，您会注意到尽管看起来我们应该PropTypes在作用域中有一个变量，但实际上并没有。有点玄学？

进一步的实验

同样，Babel 的 REPL 可以帮助我们解决这个问题。让我们看看如果我们编写一些使用PropTypes并编译它的代码会发生什么。

import React, { PropTypes } from 'react/addons';

console.log(PropTypes);

变成：

var _addons = require('react/addons');

var _addons2 = _interopRequireDefault(_addons);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

console.log(_addons.PropTypes);

需要注意的一些重要事项。

• 它将引用编译PropTypes为_addons.PropTypes
• 它_addons不使用_addons2（与示例 1 不同）

发生这种情况是因为{ PropType } from示例 2 中的语法不是解构的。

命名导入

如果我们在ES2015 规范 [15.2.2] 中跟进，我们会看到这种语法被描述为NamedImports。

NamedImports :
  { }
  { ImportsList }
  { ImportsList , }

此语法旨在从导入的模块中提取命名导出。

例如，如果 react/addons 包是作为 ES6 模块发布的，那么第二个语法就必须看起来像这样才能工作。

export const PropTypes = {
  // prop types
};

export default React;

编译为：

Object.defineProperty(exports, "__esModule", {
  value: true
});
var PropTypes = exports.PropTypes = {};

// prop types
exports.default = React;

PropTypes作为命名导出添加到exports对象。

结论

import React from 'react/addons';
let {PropTypes} = React;

这是一般的解构语法。当exports.default值有一个PropTypes字段时它起作用。

import React, { PropTypes } from 'react/addons';

此语法用于访问命名导出。当 react/addons 模块为 导出命名值PropTypes和默认值时，它会起作用React。