Question

我很困惑组件和反应类之间的区别？

我何时在反应类中使用组件？看起来组件是一个类，createClass创建一个组件。

https://facebook.github.io/react/docs/top-level-api.html

React.Component

这是React Components在使用时定义的基类 ES6课程。有关如何使用ES6类的信息，请参阅可重用组件反应。有关基类实际提供的方法，请参阅组件API。

React.createClass

根据规范创建组件类。一个组件实现一个返回一个子节点的render方法。那个孩子可能有一个任意深度的子结构。有一点是这样的不同于标准原型类的组件就是你不需要在他们身上打电话给新人。它们是便利包装纸为你构建后备实例（通过new）。

Answer 1

React.createClass不支持的唯一MyComponent extends React.Component功能是mixins。

你可以做getInitialState()：

class MyComponent extends React.Component {
  constructor(props, context) {
    super(props, context);

    // initial state
    this.state = {
      counter: 0
    };
  }

  ...
}

或者如果你使用像babel这样的转录器，你可以得到

class MyComponent extends React.Component {
  state = {
    counter: 0
  }

  ...
}

您可以使用上面显示的.bind(this)显式绑定，而不是使用createClass提供的自动绑定，或使用胖箭头ES6语法：

class MyComponent extends React.Component {
  onClick = () => {
    // do something
  }
  ...
}

你可以把东西放在构造函数中，而不是把东西放在componentWillMount中：

class MyComponent extends React.Component {
  constructor(props, context) {
    super(props, context);

    // what you would have put in componentWillMount
  }

  ...
}

React文档本身有更多细节，但基本上React.createClass购买的唯一附加功能是mixins，但是你可以用上下文和更高阶的组件完成任何你可以做的事情。

Answer 2

他们是做同样事情的两种方式。

React.createClass是一个返回Component类的函数。

MyComponent = React.createClass({
  ...
});

React.Component是您可以扩展的现有组件。在使用ES6时非常有用。

MyComponent extends React.Component {
  ...
}

Answer 3

React.createClass - 创建组件类的方法

通过扩展React.Component更好地与ES6模块一起使用，扩展了Component类而不是调用createClass

两者之间的差异很小，

语法： React.createClass：

var MyComponent = React.createClass({ });

React.Component：

export default class MyComponent extends React.Component{ }

getInitialState（）： React.createClass：是 React.Component：否

构造函数（）： React.createClass：没有 React.Component：是

propTypes语法： React.createClass：

var MyComponent = React.createClass({
    propTypes: { }
});

React.Component：

export default class MyComponent extends React.Component{ }
MyComponent.prototypes = { }

默认属性： React.createClass：

var MyComponent = React.createClass({
    getDefaultProps(): { return {} }
});

React.Component：

export default class MyComponent extends React.Component{ }
MyComponent.defaultProps = { }

州： React.createClass：

State changes can be made inside getInitialState() function

React.Component：

State changes can be made inside constructor(props) function

这个：
React.createClass：

automatically bind 'this' values.
Ex: <div onClick={this.handleClick}></div>
'this' can be accessed by default in handleClick function

React.Component：

whereas here we need to bind explicitly,
Ex: <div onClick={this.handleClick.bind(this)}></div>

Answer 4

看起来React建议我们使用React.createClass

据我所知

MyComponent extends React.Component不支持getInitialState()
在.bind(this) React.createClass中使用React.createClass即可获得

警告：bind（）：您正在将组件方法绑定到组件。 React会以高性能方式自动为您执行此操作，因此您可以安全地删除此调用。

我认为它可能不仅仅是这个。

如果某人列出了所有html{ color:#000; } .a{ width:200px; height:200px; background:#000; text-align:center; font-size:36px; overflow:hidden; cursor:pointer; } .b{ width:200px; height:200px; background:url('http://cdn.bigbangfish.com/quotes/nature-quotes-tumblr/nature-quotes-tumblr-8.jpg'); background-size:cover; text-align:center; font-size:36px; margin:0 auto; transform: rotateZ(0) scale(1); transition: all 0.3s ease-in-out; } .icon{ background-image:url('http://lifeandscience.org/keepers/files/2011/02/combo_plus_sign2.png'); background-size:container; background-position:center; background-repeat:no-repeat; background-color: rgba(255, 255, 255, 0.29); position:absolute; top:0; bottom:0; left:0; right:0; opacity:0; transition: all 0.3s ease-in-out; } .a:hover .b, .a:hover .icon{ -webkit-transform: rotateZ(-3deg) scale(1.2); transform: rotateZ(-3deg) scale(1.2); opacity:1; }功能，那将非常棒。

注意：React目前为0.14.3

Answer 5

老实说，唯一的区别是 React.createClass 使用了 mixins 而新的 ES6 语法没有。

两者都只是语法，选择最适合您的。 React 实际上希望在未来的更新中弃用 React.createClass 以支持 ES6 语法。

因此，我建议您和未来的用户检查这些链接，因为此线程上的大部分答案都是相关的，并进行了详细说明。

https://ultimatecourses.com/blog/react-create-class-versus-component

https://www.newline.co/fullstack-react/articles/react-create-class-vs-es6-class-components/

React.Component vs React.createClass

5 个答案: