普通 es6 类和扩展 React.Component 有什么区别

IT技术 reactjs ecmascript-6
2021-05-08 17:39:40

我使用react-fullstack作为脚手架来开始我的项目。

我发现它的示例代码与官方的 react 文档有很大的不同。

示例代码是这样的:

@withStyles(styles)
class Header {

  render() {
    return (
     /* simple JSX code */
    );
  }
}


function withStyles(styles) {
  return (ComposedComponent) => class WithStyles {

    static contextTypes = {
      onInsertCss: PropTypes.func
    };

    constructor() {
      this.refCount = 0;
      ComposedComponent.prototype.renderCss = function (css) {
        let style;
        if (ExecutionEnvironment.canUseDOM) {
          if (this.styleId && (style = document.getElementById(this.styleId))) {
            if ('textContent' in style) {
              style.textContent = css;
            } else {
              style.styleSheet.cssText = css;
            }
          } else {
            this.styleId = `dynamic-css-${count++}`;
            style = document.createElement('style');
            style.setAttribute('id', this.styleId);
            style.setAttribute('type', 'text/css');

            if ('textContent' in style) {
              style.textContent = css;
            } else {
              style.styleSheet.cssText = css;
            }

            document.getElementsByTagName('head')[0].appendChild(style);
            this.refCount++;
          }
        } else {
          this.context.onInsertCss(css);
        }
      }.bind(this);
    }

    componentWillMount() {
       /* some implement */
    }

    componentWillUnmount() {
      /* some implement */
    }

    render() {
      return <ComposedComponent {...this.props} />;
    }

  };
}

它甚至根本没有扩展React.Component,我也看不到它使用原型继承。

但它确实有效,而且每个组件都可以像官方文档所说的那样使用。

这是否意味着如果我用该render方法实现一个类,我就实现了一个 React 组件?

1个回答

这是否意味着如果我用该render方法实现一个类,我就实现了一个 React 组件?

差不多。React.Component只提供方法setStateforceUpdateReact.Component如果您需要它们,您只需继承 编辑:随着无状态组件(函数)的引入,React.Component实际上需要扩展,以便 React 可以将函数与类构造函数区分开来。