React.Component vs React.createClass-Java 学习之路

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

我什么时候在反应类中使用组件？看起来组件是一个类，createClass创建一个组件 .

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

React.Component

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

React.createClass

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

4 回答

3
MyComponent extends React.Component 不支持的唯一 React.createClass 功能是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，但是你可以用上下文和更高阶的组件来完成你可以用mixin做的任何事情 .
回复于 2024-04-16T12:36:16+08:00
14
他们是做同样事情的两种方式 .

React.createClass 是一个返回Component类的函数 .
```
MyComponent = React.createClass({
  ...
});
```
React.Component 是您可以扩展的现有组件 . 使用ES6时主要有用 .
```
MyComponent extends React.Component {
  ...
}
```
回复于 2024-04-16T12:36:16+08:00

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

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

两者之间几乎没有差异，

Syntax : React.createClass：

var MyComponent = React.createClass({ });

React.Component：

export default class MyComponent extends React.Component{ }

getInitialState() : React.createClass：是React.Component：没有

constructor() : React.createClass：No React.Component：是的

propTypes Syntax : React.createClass：

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

React.Component：

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

Default Properties : 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

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

回复于 2024-04-16T12:36:16+08:00

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

我所知道的
- MyComponent extends React.Component 不支持 getInitialState()
- 在 React.createClass 使用 .bind(this) 你会得到这个
警告：bind（）：您正在将组件方法绑定到组件 . React会以高性能方式自动为您执行此操作，因此您可以安全地删除此调用 .

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

如果有人列出所有的 React.createClass 功能将是如此之大 .

注意：React目前在0.14.3
回复于 2024-04-16T12:36:16+08:00

React.Component vs React.createClass

4 回答

相关问题