Question

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

export default () => {

但有时我看到了 -

export default class Entry extends React.Component {。

这两者之间有什么区别，即。导出会自动延长React.Component吗？什么是最佳做法？

Answer 1

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

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

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

基本上做：

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

与：

相同

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

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

Answer 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'];
...

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

2 个答案: