var MyClass = React.createClass({...});
之间的不同,以
class MyClass extends React.Component{...}
var MyClass = React.createClass({...});
之间的不同,以
class MyClass extends React.Component{...}
这两种方式取决于如果您正在使用ES6语法与否,他们也改变设定的方式你的初始状态。
使用ES6类时,您应该初始化constructor
中的状态。
使用React.createClass时,您必须使用getInitialState
函数。
ES6类语法:
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = { /* initial state, this is ES6 syntax (classes) */ };
}
}
ES5 React.CreateClass语法:
var MyComponent = React.createClass({
getInitialState() {
return { /* initial state */ };
},
});
这些都将同样的方式工作,以建立初始状态。
随着class MyClass extends React.Component{...}
语法,
不能使用的混入,你需要的方法自己
class MyClass extends Component {
constructor() {
super();
this.handleClick.bind(this);
}
handleClick() {
this.setState(...);
}
}
的情况下绑定到我这是最大的区别。
更换混入,你可以使用一个容器来包装你的组件
export default Container(MyClass);
function Container(Component) {
var origin = Component.prototype.componentDidMount;
Component.prototype.componentDidMount = function() {
origin.apply(this, arguments);
/* do mixin */
}
}
一个主要区别不是上面提到的是state
如何使用createClass
VS extending
一个Component
时继承。
var BaseComponent extends Component {
constructor(props) {
super(props);
this.state = {
foo: 'bar'
};
}
});
var BaseClass = React.createClass({
getInitialState() {
return {
foo: 'bar'
};
}
});
class Test extends BaseClass { // or extend BaseComponent
constructor(props){
super(props);
this.state = {
...this.state,
myNewVar: 'myNewVal'
}
render() {
alert(this.state.foo)
}
}
这个(createClass允许继承状态)行是什么意思? –
继承是一个非常普遍的面向对象的概念。你可以阅读更多[这里](https://en.wikipedia.org/wiki/Inheritance_(object-oriented_programming))。它只是意味着尽管'Test'没有在其'state'上定义'foo',它在扩展'BaseClass'时从它的父节点获取它。 –
请注意,这不是惯用的React - 您应该只在**设计React类时扩展'React.Component'(如果可能,理想情况下使用功能组件)。喜欢构成继承。 – Idefixx
React.createClass
在这里,我们有分配阵营类常量,具有重要的渲染功能,下面就来完成一个典型的基础组件定义。
import React from 'react';
const Contacts = React.createClass({
render() {
return (
<div></div>
);
}
});
export default Contacts;
React.Component
让我们以上述React.createClass定义,并将其转换为使用ES6类。
import React from 'react';
class Contacts extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div></div>
);
}
}
export default Contacts;
从现在开始我们使用ES6类一个JavaScript的角度来看,这通常会用像巴贝尔用来编译器ES6到ES5在其他浏览器。有了这个变化,我们引入了构造函数,我们需要调用super()将道具传递给React.Component。
对于变化做出反应,我们现在创建一个类所谓的“联系人”和延长从React.Component而不是访问React.createClass直接,使用较少阵营样板和更多的JavaScript。这是一个重要的改变,要注意这个语法交换带来的进一步变化。
实际上,有超过分歧'getInitialState'评论中接受的答案。另外,区别在于:使用'this';使用'defaultProps';使用_mixins_。你可以阅读这篇文章中的这些变化:https://toddmotto.com/react-create-class-versus-component/ –