React.Component 是导出时的默认扩展名吗？答案

【问题标题】：Is React.Component the default extension when exporting?React.Component 是导出时的默认扩展名吗？
【发布时间】：2015-12-24 07:22:11
【问题描述】：

我正在浏览一些 React 项目，有时会看到-

export default () => {

但其他时候我看到-

export default class Entry extends React.Component {.

两者之间有什么区别吗？导出是否会自动扩展React.Component？最佳做法是什么？

【问题讨论】：

不，当您导出默认值时，它只会导出该函数而不是组件
export 与 React 无关，所以答案是否定的。

标签： javascript reactjs ecmascript-6

【解决方案1】：

你看到的 export default () => 是 React 0.14+ "Functional Component"。

这是一种用于编写 React 组件的更简洁的新语法。它和其他语法都很好。

这些组件的行为就像只定义了一个渲染方法的 React 类。由于没有为功能组件创建组件实例，因此添加到一个的任何 ref 都将评估为 null。函数式组件没有生命周期方法，但您可以将 .propTypes 和 .defaultProps 设置为函数上的属性。

基本上在做：

class MyComponent extends React.Component {
  render() {
    return <p>Hello</p>;
  }
}

等同于：

const MyComponent = () => <p>Hello</p>;

在 React 组件中使用并传递给 Render 时。

【讨论】：

【解决方案2】：

第一个是功能组件。但是，其他代码将导出常规类/React 组件。

例如

export default (withHistory, onUpdate) => {
    const history = new HashHistory;
  return (
    <Router history={history} onUpdate={onUpdate}>
      <Route path='/' component={Index} />
    </Router>
  );
};

将编译（至少使用 Babel+webpack）到

...
var _reactRouterLibHashHistory = __webpack_require__(35);
var _reactRouterLibHashHistory2 = _interopRequireDefault(_reactRouterLibHashHistory);
exports['default'] = function (withHistory, onUpdate) {
      var history = new _reactRouterLibHashHistory2['default']();
      return React.createElement(
        _reactRouter.Router,
        { history: history, onUpdate: onUpdate },
        React.createElement(_reactRouter.Route, { path: '/', component: _routesIndex2['default'] })
      );
    };
module.exports = exports['default'];
...

【讨论】：