react native - props - React.createClass vs extends Component

react.createclass is not a function

Question

¿Cuál es la diferencia entre

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

A

class MyClass extends React.Component{...}

Answer 1

Con la class MyClass extends React.Component{...} ,

no puedes usar mixins y debes vincular el contexto del método tú mismo

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

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

para mí estas son las mayores diferencias.

para reemplazar el mixin, puede usar un contenedor para envolver su componente

export default Container(MyClass);

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

Answer 2

Estas dos formas dependen de si está usando la sintaxis ES6 o no, y también cambian la forma en que configura su estado inicial.

Al usar clases ES6, debe inicializar el estado en el constructor .

Al usar React.createClass, debe usar la función getInitialState .

Sintaxis de clase ES6:

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

Sintaxis ES5 React.CreateClass:

var MyComponent = React.createClass({
  getInitialState() {
    return { /* initial state */ };
  },
});

Ambos funcionarán de la misma manera para configurar el estado inicial.

Answer 3

Un diferenciador importante no mencionado anteriormente es cómo se hereda el state al usar createClass frente a extending un 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

Aquí tenemos un const con una clase React asignada, con la importante función render siguiente para completar una definición típica de componente básico.

import React from ''react'';

const Contacts = React.createClass({
    render() {
    return (
    <div></div>
   );
  }
});

export default Contacts;

React.Component

Tomemos la definición de React.createClass anterior y conviértalo para usar una clase ES6.

import React from ''react'';

class Contacts extends React.Component {
  constructor(props) {
  super(props);
  }
    render() {
    return (
    <div></div>
  );
 }
}

export default Contacts;

Desde la perspectiva de JavaScript, ahora estamos utilizando clases de ES6, normalmente esto se usaría con algo como Babel para compilar ES6 a ES5 para que funcione en otros navegadores. Con este cambio, presentamos el constructor , donde tenemos que llamar a super () para pasar los puntales a React.Component .

Para los cambios de Reacción, ahora creamos una clase llamada "Contactos" y la ampliamos desde React.Component en lugar de acceder directamente a React.createClass , que usa menos texto repetido de Reaccionar y más JavaScript. Este es un cambio importante para notar más cambios que trae este intercambio de sintaxis.

toddmotto.com/react-create-class-versus-component