react native - props - React.createClass vs extends Component
react.createclass is not a function (4)
¿Cuál es la diferencia entre
var MyClass = React.createClass({...});
A
class MyClass extends React.Component{...}
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 */
}
}
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.
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)
}
}
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.