javascript - para - ¿Qué hace super() con cualquier argumento?

super() python

Question

Estoy aprendiendo a reaccionar de los documentos , pero no estoy seguro de lo que hace el super() en este ejemplo. Por lo general, ¿no toma los argumentos que se pasan para crear una nueva instancia y luego llama al método constructor de React.Component para incorporar estos argumentos en la instancia? ¿Qué hace sin argumentos?

class LikeButton extends React.Component {
constructor() {
super();
this.state = {
liked: false
};
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState({liked: !this.state.liked});
}
render() {
const text = this.state.liked ? ''liked'' : ''haven/'t liked'';
return (
<div onClick={this.handleClick}>
You {text} this. Click to toggle.
</div>
);
}
}
ReactDOM.render(
<LikeButton />,
document.getElementById(''example'')
);

Answer 1

En ES6, las clases derivadas deben llamar a super() si tienen un constructor. En reaccionar, todos los componentes se extienden desde la clase Componente.

Realmente no necesitas un constructor para cada clase ES6 / reaccionar. Si no se define un constructor personalizado, usará el constructor predeterminado . Para las clases base, es:

constructor() {}

Y para las clases derivadas, el constructor predeterminado es:

constructor(...args) {
super(...args);
}

También debe llamar a super() antes de acceder a this , ya que this no se inicializa hasta que se llame a super() .

Hay algunas razones para usar un constructor personalizado en reaccionar. Una es que puede establecer el estado inicial dentro del constructor usando this.state = ... lugar de usar el método getInitialState lifecycle.

También puede vincular métodos de clase dentro del constructor con this.someClassMethod = this.someClassMethod.bind(this) . En realidad, es mejor enlazar métodos en el constructor, ya que solo se crearán una vez. De lo contrario, si llama a bind o usa funciones de flecha para vincular métodos en cualquier lugar fuera del constructor (como en el método de render ), en realidad terminará creando una nueva instancia de la función en cada renderizado. Lea más sobre eso aquí .

Si desea utilizar this.props en el constructor, debe llamar a super con props como argumento:

constructor(props) {
super(props);
this.state = {count: props.initialCount};
}

Si no lo hace, entonces this.props no está definido en el constructor. Sin embargo, todavía puede acceder a this.props cualquier otro lugar de la clase fuera del constructor sin necesidad de hacer nada con él en el constructor.