导入语句：有还是没有 React？答案

【问题标题】：Import statements: with or without React?导入语句：有还是没有 React？
【发布时间】：2016-06-23 13:53:49
【问题描述】：

关于是否有必要在无状态组件中导入React 存在一些争论，我找不到任何关于它的文档。所以：

//OPTION 1
import React, { PropTypes } from 'react';

//OPTION 2
import { PropTypes } from 'react';

export const Button = ({ action }) => {
  return (
    <button onClick={action}>Submit</button>
  );
}

Button.propTypes = {
  action: PropTypes.func.isRequired,
};

有人说选项 1 是使用 JSX 时的最佳实践；其他一些 think 组件将因选项 2 而失败。

我都试过了，我看不出有什么区别，组件在这两种情况下仍然有效。

选项 1 或选项 2：哪个是正确的？

【问题讨论】：

我收到选项 2 的参考错误，所以请始终使用选项 1。

标签： reactjs ecmascript-6

【解决方案1】：

使用选项 1，因为 babel 会改变你的 jsx
<button onClick={action}>Submit</button>
致
React.createElement("button", { onClick: action }, "Submit");

因此，如您所见，react 必须在范围内。你有两个选择：

从“反应”导入反应；
或全局定义 React

【讨论】：

【解决方案2】：

这取决于您构建文件的方式。如果您使用的是 webpack 之类的模块打包器，并且没有全局 React 模块的概念，那么省略 React 将引发错误 React is not defined。

这是因为：

let C = <div />

变成：

let C = React.createElement("div", null)

所以在那个特定的模块内.. React 没有被导入，因此会在未定义的变量上跳闸。

您可以将React 暴露给窗口命名空间，然后您不需要将它导入到每个文件中。这取决于你。

【讨论】：

这是有道理的。但是我确实使用 webpack 并且组件不会抛出 :confused:
您实际上是在某处使用该组件吗？或者只是定义它。
我的index.js 中有window.React = React;，所以我认为你是对的
感谢您的意见。我认为说问题出在捆绑器中是不正确的。捆绑器本身不进行任何转译。但 Babel 确实存在，问题就在于此。
两者兼而有之。如果没有模块捆绑器，那么您根本就不会导入东西。 webpack 也有用于定义全局模块的插件来解决你的问题。当然，它也与转译有关。