Javascript 语法 - 类的箭头函数

Question

在网上学习了一些教程后，我偶然发现了一些我不熟悉的奇怪的 JavasSript 语法。在此tutorial ，作者这样做了

export default ComposedComponent => class extends 

谁能给我解释一下这是什么意思吗？它看起来像一个胖箭头函数，但似乎没有任何参数。它也是多行的，但没有括号。这到底是什么意思？

Answer 1

简介:

我们“传统上”声明 ES6 类，如下所示:

export default class Apple extends Fruit { ... }

哪里Apple只是类(class)的名称。在您的示例中:

export default ComposedComponent => class extends Component { ... }

只是一个箭头函数，带有一个参数ComposedComponent ，和一个匿名类。它基本上相当于:

export default (ComposedComponent) => {
    return class extends Component {
        ...
    }
}

哪里class extends Component是一个未命名的类，它扩展了 React 的 Component .

它是什么:

这是一个高阶组件包装器。您可以将其视为包装另一个组件(组件工厂)的 React 组件。它遵循以下语法:

HigherOrderComponentFactory = WrappedComponent: React.Component => NewComponent: React.Component

哪里WrappedComponent是被包装的组件，NewComponent是返回的新的、更高阶的组件 - 均继承自 React.Component 。现在，如果您看一下 render方法:

return (
  <ComposedComponent
    {...this.props}
    subscribe={this.subscribe.bind(this)}
    subscriptionReady={this.subscriptionReady.bind(this)}
  />
);

在这里，<ComposedComponent {...this.props} />相当于:

React.createElement(ComposedComponent, this.props, null);

应用:

让我们再看一下工厂声明:

export default ComposedComponent => class extends Component { ... }

默认导出箭头函数(与上面提到的工厂相当)，并有一个参数 ComposedComponent 。在这里，ComposedComponent是将由工厂包装的组件，并且 class extends Component { ... }将是新的、更高阶的组件。

在您的教程中，箭头函数(或 HOC 工厂)的调用方式如下:

SubscribeComponent(App)

App是要包装的组件，换句话说 ComposedComponent 。返回的分量是高阶分量。

有关高阶组件及其优点的更多阅读 here .