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

一个和另一个的优点是什么？Respon-native Component与React.createClass实现UI组件的优缺点？

是否被弃用，我应该使用较新的一个，可能是哪个？

我应该创建组件还是React类来开发我的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类转换为一个组件，并发现“this”指针不起作用，因为React类使用了自动绑定，并且组件需要显式绑定。

来源

2016-03-04 Ed of the Mountain

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

最值得注意的新功能是支持ES6类，它允许开发人员在编写组件时具有更大的灵活性。我们的最终目标是让ES6类完全替代React.createClass，但是直到我们取代了当前的mixin用例以及对语言中的类属性初始值设定项的支持，我们并不打算反对React.createClass。

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

没有自动绑定

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

没有混入

不幸的是ES6推出没有任何混入的支持。因此，当您使用React和ES6 类时，不支持mixin。相反，我们正在努力使其更容易支持这种使用情况，而不诉诸mixin。

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

来源

2016-03-04 19:29:22

我现在明白了，当您说“prefer Class”时，这意味着使用以下语法来创建一个新的React Native UI组件。 class Photo extends React.Component“。谢谢你的帮助 –

除非你使用的混入，总是使用类（阅读器ES6），而不是React.createClass。大多数反应本机代码都在ES6中，所以它有助于保持最新的当前标准。

关于性能/用户界面没有区别。类（ES6）是编写react/react-native/JS代码的更好方法。 FWIW：http://es6-features.org/。

来源

2016-03-05 03:37:09 nmh

谢谢你的链接 –

正如我在评论你所看到的，你正在寻找简单的话回答：

当看着你在你的问题提供的例子，你可能会想：“噢，我的，我为什么要用这个与extends Component更详细的版本，如果它基本上和createClass一样？“

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

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

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

作为附加TIPP，你不必把它绑定到您的功能（例如，在你的榜样this.renderHeader = this.renderHeader.bind(this);如果使用的ECMAScript 6称为arrow functions另一个特点定义您的自定义功能，这立即删除两行的代码，这两种方法需要大致相同的键入量

来源

2016-03-05 10:07:43 Andru

谢谢你的简化。希望巴贝尔是一个工具的名称，并没有意识到它实际上是ECMAScript 6.现在我明白，建议更喜欢“类”意味着使用这种语法来创建一个新的“类照片扩展React.Component”。感谢您提供丰富的文章。 –

不客气！你确切地理解它是正确的。这确实有点令人困惑，因为'createClass'里面也有'class'这个词。我只是再次查看它，实际上'Babel'是'ECMAScript 6'的编译器。这就是ES6总是提到的原因。我在我的答案中改变了这一点。 – Andru

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

回答

相关问题