普通es6类和扩展React.Component之间有什么区别？ [英] What are the differences between plain es6 class and extend React.Component

问题描述

我正在使用 react-fullstack 作为脚手架开始我的项目。 p>

我发现其示例代码与官方反应文档非常不同。

示例代码如下所示： / p>

  @withStyles（styles）
 class Header {
 
 render（）{
 return（
 / * simple JSX code * / 
）; 
} 
} 
 
 
函数withStyles（styles）{
 return（ComposedComponent）=>类WithStyles {
 
 static contextTypes = {
 onInsertCss：PropTypes.func 
}; 
 
构造函数（）{
 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（）{
 / *一些工具* / 
} 
 
 render（）{
 return< ComposedComponent {... this.props} /> ;; 
} 
 
}; 
} 
  

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

但它的工作原理，每个组件都可以用作官方文档。

这是否意味着如果我使用 render 方法实现一个类，我实现了一个React组件？

解决方案

这是否意味着如果我实现一个具有 render 方法，我实现一个React组件？

很多。 React.Component 只提供方法 setState 和 forceUpdate 。 函数），实际上需要扩展 React.Component ，以便React可以区分函数和类构造函数。

I'm using react-fullstack as scaffold to start my project.

I find its sample code is very different vs the official react document.

The sample code is like this:

@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} />;
    }

  };
}

It doesn't even extend React.Component at all, I can't see it use prototype inheritance either.

But it works, and every component can be used as official document said.

Does that mean if I implement a class with the render method, I implement a React component?

解决方案

Does that mean if I implement a class with the render method, I implement a React component?

Pretty much. React.Component only provides the methods setState and forceUpdate. You only have to inherit from React.Component if you need them. Edit: With the introduction of stateless components (functions), extending React.Component is actually required so that React can distinguish functions from class constructors.

这篇关于普通es6类和扩展React.Component之间有什么区别？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！