React 中的 class extends React.component 是什么

Question

在这个linkhttps://reactjs.org/docs/higher-order-components.html 下面的解释是高阶 component.The 代码有 class 扩展 React.component。这里的 class 关键字是什么？

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

Answer 1

这是一个未命名class expression。

return class extends React.Component {

上面的代码通过扩展 React.Component class 创建了一个未命名/匿名的 class，因此，创建了一个新的 React Component包装 (returns) 传递给函数 logProps.

的 WrappedComponent

class表达式的语法为：

const MyClass = class [className] [extends otherClassName] {
    // class body
};

其中名称 className（以及 extends otherClassName）是可选的。

并且，在您的相关代码中，它只是返回结果，而不是将其分配给变量：

return class [className] [extends otherClassName] {
    // class body
};

请注意，创建React Component有两种方式，一种是写function，另一种是写class.

并且，在 JavaScript 中，ECMAScript 2015（也称为 ES6）引入了 classes。

React 中的 class extends React.component 是什么

what is class extends React.component in React

higher-order-functions

reactjs

es6-class