reactjs - instalar - react logo

React.Component vs React.createClass

Question

Estoy confundido ¿cuál es la diferencia entre un componente y una clase de reacción?

¿Y cuándo uso un componente en una clase de reacción? Parece que un componente es una clase y createClass crea un componente.

https://facebook.github.io/react/docs/top-level-api.html

React.Component

Esta es la clase base para React Components cuando se definen utilizando clases ES6. Vea Componentes Reutilizables para saber cómo usar las clases ES6 con React. Para qué métodos son realmente proporcionados por la clase base, consulte la API de componentes.

React.createClass

Cree una clase de componente, dada una especificación. Un componente implementa un método de representación que devuelve un único hijo. Ese niño puede tener una estructura infantil arbitrariamente profunda. Una cosa que hace que los componentes sean diferentes a las clases prototípicas estándar es que no necesita llamar a los nuevos en ellos. Son envolturas de conveniencia que construyen instancias de respaldo (a través de nuevas) para usted.

Answer 1

La única funcionalidad de React.createClass que React.createClass no admite se MyComponent extends React.Component es mixins.

hacer getInitialState() puede hacer:

class MyComponent extends React.Component {
  constructor(props, context) {
    super(props, context);

    // initial state
    this.state = {
      counter: 0
    };
  }

  ...
}

o si usas un transpiler como babel, puedes obtener

class MyComponent extends React.Component {
  state = {
    counter: 0
  }

  ...
}

En lugar de auto-binding provisto por createClass, usted podría vincular explícitamente usando .bind(this) como lo ha mostrado arriba, o usar la sintaxis de la flecha fat ES6:

class MyComponent extends React.Component {
  onClick = () => {
    // do something
  }
  ...
}

En lugar de poner cosas en el componenteWillMount, podrías poner cosas en el constructor así:

class MyComponent extends React.Component {
  constructor(props, context) {
    super(props, context);

    // what you would have put in componentWillMount
  }

  ...
}

Hay mucho más detalles en la documentación de React, pero básicamente la única funcionalidad adicional que React.createClass compra es mixins, pero cualquier cosa que pudieras haber hecho con mixins se puede hacer con contexto y componentes ordenados superiores.

Answer 2

Parece que React nos recomienda usar React.createClass

Por lo que sé

1. MyComponent extends React.Component no compatible getInitialState()

2. Utilice .bind(this) en React.createClass obtendrá este

   Advertencia: bind (): está vinculando un método de componente al componente. React lo hace por usted de forma automática y de alto rendimiento, por lo que puede eliminar esta llamada de manera segura.

Creo que podría ser más que esto.

Si alguien enumera todas las funciones de React.createClass será tan bueno.

Nota: Reaccionar está actualmente en 0.14.3

Answer 3

Son 2 formas de hacer lo mismo.

React.createClass es una función que devuelve una clase Component.

MyComponent = React.createClass({
  ...
});

React.Component es un componente existente que puede ampliar. Principalmente útil cuando se usa ES6.

MyComponent extends React.Component {
  ...
}

Answer 4

React.createClass - método para crear clases de componentes

Para un mejor uso con los módulos ES6, extiende el componente React.Component , que amplía la clase Component en lugar de llamar a createClass

Pocas diferencias entre ambos son,

Sintaxis: React.createClass:

var MyComponent = React.createClass({ });

React.Component:

export default class MyComponent extends React.Component{ }

getInitialState (): React.createClass: Sí React.Component: No

constructor (): React.createClass: No React.Component: Sí

propTypes Sintaxis: React.createClass:

var MyComponent = React.createClass({
    propTypes: { }
});

React.Component:

export default class MyComponent extends React.Component{ }
MyComponent.prototypes = { }

Propiedades predeterminadas: React.createClass:

var MyComponent = React.createClass({
    getDefaultProps(): { return {} }
});

React.Component:

export default class MyComponent extends React.Component{ }
MyComponent.defaultProps = { }

estado: React.createClass:

State changes can be made inside getInitialState() function

React.Component:

State changes can be made inside constructor(props) function

esta :
React.createClass:

automatically bind ''this'' values.
Ex: <div onClick={this.handleClick}></div>
''this'' can be accessed by default in handleClick function

React.Component:

whereas here we need to bind explicitly,
Ex: <div onClick={this.handleClick.bind(this)}></div>