理解React扩展组件

Question

我试图理解前锋参考指导员第一次做到这一点

import React, { Component } from 'react';
const withClass = (WrappedComponent, className) => {
const WithClass = class extends Component {
    render () {
        return (
            <div className={className}>
                <WrappedComponent ref={this.props.forwardedRef} {...this.props} />
            </div>
        )
    }
}

return React.forwardRef((props, ref) => {
    return <WithClass {...props} forwardedRef={ref} />
});
}

但由于我无法理解这一点，助理老师写了一个像这样的简化版

import React from 'react';
const myWithClass = (MyWrappedComponent, myClassName, myStyle) => {
    return React.forwardRef((myProps, myRef) => {
        return (
            <div className={myClassName} style={myStyle}>
                <MyWrappedComponent ref={myRef} {...myProps} />
            </div>;
        );
    });
};
export default myWithClass;

在这两种情况下，我们都会这样做，将值传递给我们的HOC

export default withClass(App, null, myAppStyle);

现在，我的问题是......

[1] class extends Component（我知道它继承了组件）做了什么以及在第二个例子中我们如何/为什么要消除它？