进一步的实验

Question

两者之间有什么区别：

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

VS

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

我们应遵循适当的约定吗？

Answer 1

通常情况下，使用Babel's 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变量，但是没有一个。有点神秘吗？

进一步的实验

再一次，巴贝尔的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不同）

这是因为示例2中的{ PropType } from语法未解构。

名为Imports

如果我们在ES2015 specification [15.2.2]中进行了此操作，我们会看到此语法描述为 NamedImports 。

NamedImports :
  { }
  { ImportsList }
  { ImportsList , }

此语法用于从导入的模块中提取名为exports 。

例如，如果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的默认值时，它可以工作。

允许从'react / addons'导入React并从'react / addons'

1 个答案:

进一步的实验

名为Imports

结论