Question

之间的区别是什么

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

要

class MyClass extends React.Component{...}

Answer 1

这两种方式取决于您是否使用ES6语法，它们也会改变您设置初始状态的方式。

使用ES6课程时，您应该在SELECT name, image_url FROM `".$config_databaseTablePrefix."products` WHERE (name LIKE '$queryString%') OR (some other rules....) LIMIT $numberOfProducts;。

中初始化状态

使用React.createClass时，必须使用constructor函数。

ES6类语法：

getInitialState

ES5 React.CreateClass语法：

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { /* initial state, this is ES6 syntax (classes) */ };
  }
}

这两种设置都与设置初始状态的方式相同。

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 */
   }
}

Answer 3

上面未提及的一个主要区别是使用state与createClass和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)
  }
}

Answer 4

<强> React.createClass

这里我们有一个指定了React类的const，后面有重要的render函数来完成一个典型的基本组件定义。

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;

从JavaScript的角度来看，我们现在正在使用ES6类，通常这将使用像Babel这样的东西来编译ES6到ES5以在其他浏览器中工作。通过此更改，我们引入构造函数，我们需要调用 super（）将道具传递给 React.Component 。

对于React更改，我们现在从 React.Component 创建名为“Contacts”和 extend 的类，而不是访问直接使用React.createClass ，它使用较少的React样板和更多的JavaScript。这是一个重要的变化，需要注意这种语法交换带来的进一步变化。

More

React.createClass vs extends Component

4 个答案: