高阶组件：函数关键字 vs 箭头函数

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 并且我们有不使用 function 关键字的 TS-lint 规则。

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

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

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

Answer 1

在您的情况下不会有任何区别 - 它们的行为相同。

但有些情况并非如此 - 关于这个主题有一个很好的。

高阶组件：函数关键字 vs 箭头函数

Higher Order Component: function keyword vs arrow function

javascript

reactjs

ecmascript-6

higher-order-components