React.Component vs React.createClass

Question

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

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

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

React.Component

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

React.createClass

给定规范,创建组件类.组件实现一个返回一个子节点的render方法.那个孩子可能有一个任意深度的孩子结构.使组件与标准原型类不同的一点是,您不需要在它们上调用new.它们是为您构建后备实例(通过new)的便捷包装器.

Answer 1

mixin React.createClass不支持的唯一功能MyComponent extends React.Component.

这样做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,但afaik你可以用mixin做的任何事情都可以用上下文和更高阶的组件来完成.

Answer 2

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

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

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

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

MyComponent extends React.Component {
  ...
}

Answer 3

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

为了更好地使用扩展的ES6模块React.Component,它扩展了Component类而不是调用createClass

两者之间的差异很小,

语法: React.createClass:

var MyComponent = React.createClass({ });

React.Component:

export default class MyComponent extends React.Component{ }

getInitialState(): React.createClass:是React.Component:No

constructor(): React.createClass:No 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 = { }

state: 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>