javascript - 高阶组件：函数关键字与箭头函数

Question

在展示如何创建高阶组件时，大多数示例都使用 function 关键字。

以下来自 React 文档的示例：

function logProps(WrappedComponent) {
  return class extends React.Component {
    componentWillReceiveProps(nextProps) {
      console.log('Current props: ', this.props);
      console.log('Next props: ', nextProps);
    }
    render() {
      // Wraps the input component in a container, without mutating it. Good!
      return <WrappedComponent {...this.props} />;
    }
  }
}

在我工作的地方，我们使用 TypeScript，并且我们有 TS-lint 规则不使用 function 关键字。

所以 JS 版本的高阶组件看起来像这样：

export const collapse = (options) =>
(Trigger)  =>
   class C extends React.Component {
   } 

问题是：有什么区别吗，使用带有 function 关键字的语法有什么好处吗？

Answer 1

在您的情况下，没有区别-它们的行为相同。

但有些情况并非如此——关于这个话题有一个很好的讨论。