Javascript语法-类的箭头函数

在网上做了一些教程之后，我偶然发现了一些我不熟悉的奇怪的JavasSript语法。在本文中，作者做到了这一点

export default ComposedComponent => class extends 

---

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

这是一个箭头函数，它确实有一个参数（

ComposedComponent

）。 它也是“多行的”，但它是一个单独的语句，因此不需要括号

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

每一点都一样吗

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

并且返回的类是匿名的

classx扩展组件

---

编辑 要详细说明以下评论：

这一行有三件事可能会引起混乱

export default (ComposedComponent) => {
  return class UnnamedClass extends Component {
    render () {
      return <ComposedComponent />;
    }
  };
}

这是正确的，即使return语句跨越多行不能插入分号

() => "1" +
      "2" +
      "3";

在哪

() => class extends
Component {
  // ...
}

进来

我不会这么写的，但确实是这样。我可能更喜欢做：

() => class extends Component {
  // ...
}

为了匹配我们都习惯的JS（尽管装饰程序和TS可能会改变这一点）

最后一部分很重要。 类是匿名的，除非您将它们放在需要名称的位置。
如果你仔细想想，这是完全有道理的。它们实际上只是去年的构造函数的清理版本，与大多数其他语言中的类无关

const X = class { constructor () { } };
const x = new X();

这和说没什么两样

const X = function () { };
const x = new X();

所以

及

它们是等价的

在任何可以传递函数的地方，期望有人

new

it，就可以传递匿名类

makeInstance(class {
  a () { }
  b () { }
});

把这些都绑在一起，你就会

export default ComposedComponent => class extends
Component {
  render () {
    return (
      <ComposedComponent >
       // ...
      </ComposedComponent>
    );
  }
}

export default ComposedComponent=>类扩展
组成部分{
渲染（）{
返回(
// ...
);
}
}

简介：

我们“传统上”这样声明ES6类：

export default class Apple extends Fruit { ... }

其中，

Apple

只是类的名称。在您的示例中：

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

只是一个arrow函数，带有一个参数

ComposedComponent

，以及一个匿名类。这基本上相当于：

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

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

其中

类扩展组件

是一个未命名的类，它扩展了React的

组件

它是什么：

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

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

其中，

WrappedComponent

是要包装的组件，

NewComponent

是返回的新的高阶组件-两者都继承自

React.component

。现在，如果您看看

渲染

方法：

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

应用程序：

让我们再看一看工厂声明：

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

默认情况下会导出一个箭头函数（与上述工厂类似），该函数具有一个参数

ComposedComponent

。这里，

ComposedComponent

是工厂将要包装的组件，

class extensed component{…}

将是新的高阶组件

在教程中，箭头函数（或HOC工厂）的调用方式如下：

SubscribeComponent(App)

App

是要包装的组件，换句话说

ComposedComponent

。返回的组件是高阶组件

---

更多关于高阶组件及其优点的阅读。

@AndrewLi它不能代替。。。这是一个匿名类<代码>类扩展组件。您正在查看

（ComposedComponent）=>类未命名\u类扩展组件{/*…*/}

这是否意味着ComposedComponent实际上是未命名\u类的参数？@LawrenceVo不，您想得太多了

ComposedComponent

仅在

render（）方法中使用。否则，正在生成的类是匿名类
var anonymous=类扩展组件{}
export default class extensed Component{}
export default function（ComposedComponent）{return class extensed Component{render（）{return；}；}
@LawrenceVo我明白了，这很容易被认为是ES6语法的特例。这只不过是三件事情，它们聚在一起，看起来比它们更棘手。1） 您正在声明一个导出2）该导出是一个带有一个参数（
ComposedComponent
）和一个返回语句
class扩展组件{}
，因此不需要括号或大括号3）类可以是100%匿名的，就像函数一样。把这三者联系在一起，你就很难分析到底发生了什么。我知道我必须再看一眼。
React.createElement(ComposedComponent, this.props, null);

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

SubscribeComponent(App)