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

两者有什么区别:

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

对比

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

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

最佳答案

通常，使用 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 的默认值时，它会起作用。

关于reactjs - let import React from 'react/addons' 和 import { PropTypes } from 'react/addons' 的区别，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/36060045/