react原生组件与react.createClass实现UI组件的优缺点？

一个与另一个相比有什么优势

是否有一个已被弃用，我应该使用较新的一个，无论是哪一个

我应该创建组件还是创建React类来开发我的UI

我看到一些使用组件的示例。例如：

export default class ItemList extends Component {
  constructor(props) {

  //binding functions
  this.renderHeader = this.renderHeader.bind(this);
  this.renderRow = this.renderRow.bind(this);

    super(props);
    this.state = {
      dataSource: this.props.state.planDataSource,
      planName: null
    }
}

以及其他使用

var ItemList = React.createClass({

  getInitialState: function() {
    return {
      dataSource: this.props.state.planDataSource,
      planName: null
    };
  },

我正在学习如何以身作则，我不知道哪一个是首选的

---

我最近将React类转换为组件，发现“this”指针不起作用，因为React类使用自动绑定，组件需要显式绑定。

您应该更喜欢class而不是createClass，因为它可能会被弃用

最显著的新特性是支持ES6类，这使开发人员在编写组件时具有更大的灵活性。我们的最终目标是让ES6类完全替换React.createClass，但在替换当前的mixin用例并支持该语言中的类属性初始值设定项之前，我们不打算弃用React.createClass

无自动绑定

方法遵循与常规ES6相同的语义 类，这意味着它们不会自动将其绑定到 例如。您必须显式使用.bind（this）或arrow函数 =>

无混音

不幸的是，ES6在没有任何mixin支持的情况下发布。 因此，当您使用React with ES6时，不支持mixin 上课。相反，我们正在努力使支持此类服务变得更容易 不使用mixin的用例

---

除非使用mixin，否则始终使用class（阅读ES6）而不是React.createClass。大多数react本机代码都在ES6中，因此它有助于与当前标准保持同步

---

在性能/用户界面方面没有区别。类（ES6）是编写react/react native/JS代码的更好方法。FWIW:。

正如我在你的评论中看到的，你正在用简单的话寻找答案：

当查看您在问题中提供的示例时，您可能会想“哦，天哪，如果它基本上与

createClass

相同，为什么我要在

extensed组件

中使用这个更详细的版本？”

使用

extensedcomponent

的语法通常是编写React本地UI组件和Javascript代码的现代方法。除非您需要一个名为的特殊功能，否则您应该始终坚持这一点，因为在React Native中使用

createClass

编写组件的方式可能很快就会被弃用，正如其他答案所指出的那样

这种现代版本的Javascript称为

ECMAScript 6

（其编译器名为，它将新的Javascript语法转换为旧的语法，以便当前的浏览器都能理解）。它引入了这种新的更面向对象的方式，用类编写Javascript

当开始转换到新的JS语法时，React中的命名非常混乱，因为使用

createClass

的旧语法实际上不是使用类、方法等的新面向对象语法的一部分。 很好地对比了您在问题中提到的两种语法样式之间的差异

---

---

作为附加提示，您不必将其绑定到函数（例如，

this.renderHeader=this.renderHeader.bind（this）；

在您的示例中，如果您使用另一个调用的

ECMAScript 6

功能定义自定义函数，则会立即从示例中删除另外两行代码，这两种方法需要大致相同的键入量。

感谢您的简化。我以为Babel是一个工具的名称，但没有意识到它是实际上是ECMAScript 6。现在我了解到，推荐使用“Class”意味着使用此语法创建一个新的“Class.Component”。谢谢你提供的内容丰富的文章。不客气！你完全理解它。这确实有点让人困惑，因为

createClass

中也有

class

这个词。我刚刚又查了一遍，实际上

Babel

是

ECMAScript 6

的编译器。这就是为什么ES6总是提到它的原因。我在回答中改变了这一点。我现在明白了。当你说“首选类”时，这意味着使用以下语法创建一个新的React本机UI组件。示例：“Class Photo扩展React.Component”。谢谢你的帮助