javascript - React/es6 exports createClass 和 extends Component 的区别

Question

我从 React 和 es6 开始，并试图确定两者之间的真正区别

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

和

class Voting extends React.Component { ... }

看来我可以用两者达到相同的预期效果(当然，除非我错了)。如果没有区别，我想我更喜欢第二种格式，但我似乎无法弄清楚真正的区别是什么。感谢任何和所有输入，谢谢!

Answer 1

来自blog post that announced ES6 class support :

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.

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.

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 样板代码)，因此更容易推理代码。这应该是创建 React 组件的首选方式。

不过，React.createClass 和 ES6 类之间有两个显着差异(在那篇博文中也提到了):

• Autobinding - React.createClass 将所有方法自动绑定(bind)到当前实例。对于 ES6 类，您必须自己完成。

• Mixins - ES6 类没有像 React.createClass 那样直接支持混合。