做出反应。组件vs React.create类

Question

我很困惑组件和react类之间有什么区别？

什么时候在反应类上使用组件？看起来组件是一个类，createClass创建了一个组件。

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

反应组件

这是使用ES6类定义React组件时的基类。有关如何将ES6类与React一起使用，请参见可重用组件。有关基类实际提供的方法，请参见组件API。

React.createClass

创建一个组件类，给定一个规范。组件实现一个返回一个子级的呈现方法。那个孩子可能有一个任意深的孩子结构。使组件不同于标准原型类的一点是，您不需要对它们调用new。它们是方便的包装器，为您构建后备实例（通过new）。

Answer 1

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

为了更好地使用ES6模块，请扩展React。Component，它扩展了Component类，而不是调用createClass

两者之间的一些区别是，

语法： React.create类：

var MyComponent = React.createClass({ });

反应.组成部分：

export default class MyComponent extends React.Component{ }

React.create类：Yes React.组件：否

构造函数（）：React.createClass:否React.组件：是

PropTypes语法：React.create类：

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

反应.组成部分：

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

默认属性：React.createClass:

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

反应.组成部分：

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

状态：React.create等级：

State changes can be made inside getInitialState() function

反应.组成部分：

State changes can be made inside constructor(props) function

这个：
React.create类：

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

反应.组成部分：

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

Answer 2

做同样的事情有两种方法。

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

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

反应。Component是可以扩展的现有组件。主要在使用ES6时有用。

MyComponent extends React.Component {
  ...
}

Answer 3

MyComponent扩展React.Component唯一不支持的React.createClass功能是mixin。

要执行以下操作：

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

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

  ...
}

或者如果你使用像巴贝尔这样的运输工具，你可以

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

  ...
}

与createClass提供的自动绑定不同，您可以使用. bind（this）显式绑定，如上所示，或者使用胖箭头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.create类购买的唯一额外功能是混合，但毕竟你可以用混合做的任何事情都可以用上下文和更高顺序的组件来完成。