React.createClass vs extends Component

Question

有什么不同

var MyClass = React.createClass({...});

至

class MyClass extends React.Component{...}

Answer 1

这两种方式取决于您是否使用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 */ };
  },
});

这些都将以相同的方式设置初始状态.

Answer 2

用class MyClass extends React.Component{...}语法,

你不能使用mixins,你需要自己绑定方法的上下文

class MyClass extends Component {
   constructor() {
     super();
     this.handleClick.bind(this);
   }

   handleClick() {
     this.setState(...);
   }
}

对我来说,这些是最大的差异.

要替换mixin,您可以使用Container来包装组件

export default Container(MyClass);

function Container(Component) {
   var origin = Component.prototype.componentDidMount;
   Component.prototype.componentDidMount = function() {
      origin.apply(this, arguments);
      /* do mixin */
   }
}