javascript - logo - react js vs angular

¿Por qué getInitialState no se llama para mi clase Reaccionar?

Question

Estoy usando clases de ES6 con Babel. Tengo un componente React que se ve así:

import { Component } from ''react'';
export default class MyReactComponent extends Component {
getInitialState() {
return {
foo: true,
bar: ''no''
};
}
render() {
return (
<div className="theFoo">
<span>{this.state.bar}</span>
</div>
);
}
}

No parece que se getInitialState a getInitialState , porque recibo este error: Cannot read property ''bar'' of null .

Answer 1

Código para acompañar la respuesta de Nathans:

import { Component } from ''react'';
export default class MyReactComponent extends Component {
constructor(props) {
super(props);
this.state = {
foo: true,
bar: ''no''
};
}
render() {
return (
<div className="theFoo">
<span>{this.state.bar}</span>
</div>
);
}
}

Answer 2

Los desarrolladores hablan sobre el soporte de clase ES6 en las Notas de versión para v0.13.0 . Si usa una clase ES6 que amplíe React.Component , entonces debe usar un constructor() lugar de getInitialState :

La API es principalmente lo que cabría esperar, con la excepción de getInitialState. Pensamos que la forma idiomática de especificar el estado de la clase es simplemente usar una propiedad de instancia simple. Del mismo modo getDefaultProps y propTypes son realmente solo propiedades en el constructor.

Answer 3

Para ampliar un poco sobre lo que significa

getDefaultProps y propTypes son realmente solo propiedades en el constructor.

el bit "en el constructor" es una fraseología extraña. En lenguaje OOP normal solo significa que son "variables de clase estáticas"

class MyClass extends React.Component {
static defaultProps = { yada: "yada" }
...
}

o

MyClass.defaultProps = { yada: "yada" }

también puedes referirte a ellos dentro de la clase como:

constructor(props) {
this.state = MyClass.defaultProps;
}

o con cualquier cosa que declare como una variable de clase estática. No sé por qué no se habla de esto en ninguna parte en línea con respecto a las clases de ES6:?

ver los documentos .