reactjs - 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'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 变量，但实际上并没有。有点神秘？

进一步实验

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 不同)

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

命名导入

如果我们在ES2015 specification [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 的默认值时，它会起作用。