react-native Component 与 React.createClass 实现 UI 组件的优缺点？

Question

两者相比有什么优势？

一个被弃用了，我应该使用更新的那个吗？

我应该创建组件还是 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-native，但我不知道哪个是首选。

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

Answer 1

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

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

https://facebook.github.io/react/blog/2015/03/10/react-v0.13.html

无自动绑定

方法遵循与常规 ES6 相同的语义 类，这意味着它们不会自动将 this 绑定到 实例。您必须明确使用 .bind(this) 或箭头函数 =>。

没有混入

不幸的是，ES6 在没有任何 mixin 支持的情况下启动。 因此，当你在 ES6 中使用 React 时，不支持 mixins 类。相反，我们正在努力使其更容易支持此类 不用借助 mixins 的用例。

https://facebook.github.io/react/docs/reusable-components.html

Answer 2

除非您使用 mixins，否则请始终使用 class（阅读 ES6）而不是 React.createClass。大多数 react-native 代码都在 ES6 中，因此有助于跟上当前标准。

在性能/用户界面方面没有区别。无论如何，class (ES6) 是编写 react/react-native/JS 代码的更好方法。 FWIW：http://es6-features.org/.

Answer 3

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

查看您在问题中提供的示例时，您可能会想“哦，天哪，如果它与 createClass 基本相同，我为什么要使用带有 extends Component 的更详细的版本？”

嗯，使用 extends Component 的语法是编写 React Native UI 组件和一般 Javascript 代码的现代方式。你应该一直坚持这一点，除非你需要一个名为 mixins 的特殊功能，因为正如其他答案所指出的那样，使用 createClass 编写组件的方式可能很快就会在 React Native 中被弃用。

这个现代版本的 Javascript 被称为ECMAScript 6（它的编译器被称为babel，它将新的 Javascript 语法翻译成旧的语法，以便当前的浏览器都能理解它）。它引入了这种新的、更加面向对象的使用类编写 Javascript 的方式。

当开始过渡到新的 JS 语法时，React 中的命名相当混乱，因为带有 createClass 的旧语法实际上并不是带有类、方法等的新的面向对象语法的一部分。 This article 很好地对比了您在问题中询问的两种语法样式之间的差异。

---

作为额外的提示，您不必将它绑定到您的函数（例如，如果您使用 ECMAScript 6 的另一个名为 arrow functions 的功能定义自定义函数，则在您的示例中为 this.renderHeader = this.renderHeader.bind(this);。这会立即删除两个您的示例中的代码行更多，这两种方法需要大致相同的输入量。