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

Question

两者相比有什么优势？

是否有人弃用了我应该使用较新的那个？

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

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

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 class 转换为组件，发现 "this" 指针不起作用，因为 React classes 使用了自动绑定，而组件需要显式绑定。

Answer 1

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

The most notable new feature is support for ES6 classes, which allows developers to have more flexibility when writing components. Our eventual goal is for ES6 classes to replace React.createClass completely, but until we have a replacement for current mixin use cases and support for class property initializers in the language, we don't plan to deprecate React.createClass.

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

No Autobinding

Methods follow the same semantics as regular ES6 classes, meaning that they don't automatically bind this to the instance. You'll have to explicitly use .bind(this) or arrow functions =>.

No Mixins

Unfortunately ES6 launched without any mixin support. Therefore, there is no support for mixins when you use React with ES6 classes. Instead, we're working on making it easier to support such use cases without resorting to mixins.

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

Answer 2

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

关于performance/UI没有区别。 class (ES6) 是编写 react/react-native/JS 代码的更好方式。 FWIW：http://es6-features.org/.

Answer 3

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

在查看您在问题中提供的示例时，您可能会想 "Oh my, why should I use this more verbose version with extends Component if it basically does the same as createClass?"

嗯，使用 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。这会立即从您的示例中删除另外两行代码，并且这两种方法需要大致相同的输入量。

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

Pros and Cons of react-native Component versus React.createClass to implement UI components?

components

class

react-native