React / es6导出之间的区别createClass和extends Component [英] React/es6 difference between exports createClass and extends Component

问题描述

我开始反应和es6，并试图确定

I am starting out with react and es6 and and trying to determine the real difference between

export const Voting = React.createClass({ ... })

和

class Voting extends React.Component { ... }

似乎我可以实现同样的期望效果（除非我当然是错误的）。我想我更喜欢第二种格式，如果没有区别，但我似乎无法弄明白什么是真正的区别。感谢任何和所有的输入，谢谢！

It seems I can achieve the same desired effect with both (unless I am mistake, of course). I think I would prefer the second format if there is no difference, but I can't seem to figure out what the real difference is. Would appreciate any and all input, thanks!

推荐答案

从发布ES6类支持的博文：

JavaScript最初没有内置的类系统。每个流行的框架都建立了自己的，我们也是如此。这意味着您对每个框架都有一个学习略有不同的语义。

JavaScript originally didn't have a built-in class system. Every popular framework built their own, and so did we. This means that you have a learn slightly different semantics for each framework.

我们认为我们没有设计类系统。我们只想使用惯用JavaScript创建类的方式。

We figured that we're not in the business of designing a class system. We just want to use whatever is the idiomatic JavaScript way of creating classes.

在React 0.13.0中，您不再需要使用 React.createClass 来创建React组件。如果您有一个透析器，您可以使用ES6类。

In React 0.13.0 you no longer need to use React.createClass to create React components. If you have a transpiler you can use ES6 classes today.

所以，两者都做同样的事情（定义一个React组件），但是ES6类是更本地的方法自定义反应样板代码），因此更容易推理代码。这应该是创建React组件的首选方法。

So, both do the same thing (define a React component), but ES6 classes is the more native way to do it (no custom React boilerplate code) and as such it is much easier to reason about the code. This should be the preferred way of creating React components.

React.createClass 和ES6之间有两个显着的区别课程（在该博客文章中也提到）：

There are two notable differences between React.createClass and ES6 classes though (also mentioned in that blog post):

• 自动绑定 - React.createClass 将所有方法自动绑定到当前实例。使用ES6课程，您必须自己做。

• Autobinding - React.createClass autobinds all methods to the current instance. With ES6 classes you have to do that yourself.

Mixins - ES6类没有直接支持mixin，如 React.createClass 没有。

Mixins - ES6 classes have no direct support for mixins like React.createClass did.

这篇关于React / es6导出之间的区别createClass和extends Component的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！