使用ES6类语法来响应组件

时间:2015-08-21 21:41:36

标签: javascript inheritance reactjs ecmascript-6 prototypal-inheritance

据我所知,有两种方法可以使用ES6创建和导出反应类。

也许被认为是旧的方式:

export default React.createClass({
   ...
});

也许是新的方式:

export class Todo extends React.Component {
   ...
};

我今天被问到为什么我喜欢'旧'方式而不是'新'方式。除了'新'方式使用扩展,因此继承之外,我没有真正得到一个好答案。我在c#中被教导总是喜欢构图而不是继承。并且在javascript中相同,更喜欢在95%的情况下使用揭示模块模式而不是原型继承。

作为一个相当新的反应,我的问题是,我错过了为什么新的方式比旧的方式更好的东西?在我看来,拥有一个接受参数并返回一个对象的函数比继承一个对象要清晰得多。

跟随转换,TodoComponent,或许添加某种装饰器而不是从React.Component延伸可能不是更好吗?

3 个答案:

答案 0 :(得分:1)

我倾向于总是查看React团队的示例以获得指导。在这种情况下,他们提供了whole example致力于ES2015。当你引用它时,这显然涵盖了“新”语法。

我还仔细阅读了很多代码,看看事情是如何完成的。使用ES2015的大多数项目也使用“新”语法。

答案 1 :(得分:0)

我不能告诉你哪个更好,我在中间。但是你要记住的一件事是,大多数人会选择新的语法,特别是当ES6变得更加可用时。你应该习惯于看到并使用它,因为在人们迁移到它时,你将会看到越来越多的例子。保持相关性而不是退缩几乎是必要的。你会习惯它,我实际上开始越来越喜欢它了。

答案 2 :(得分:0)

ES6语法将被转换为ES5,因为现代浏览器尚未完全支持ES6。旧方式的一个好处是[mixins]只能以旧的方式使用。新方法将减少打字和一些额外的功能。特别是通过箭头功能确定范围!结帐:https://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html#mixins