Supongamos que tengo dos componentes, uno adentro de otro:
class Componente1 extends React {
constructor(props) {
super(props);
this.state = {
persona: {
nombre: "Genaro",
edad: 125
}
};
}
render() {
return (
<SubComponente
persona={this.state.persona}
/>
);
}
}
Ahora, quiero que se actualice el SubComponente
cuando el estado de persona
cambia. Esto se hace automáticamente, pero encontré dos formas para hacerlo:
Opción 1 (con estado en el subcomponente):
class SubComponente extends React {
constructor(props) {
super(props);
this.state = {
persona: props.persona
};
}
componetWillReceiveProps(props) {
this.setState({ persona: props.persona });
}
render() {
return (
<h1>Nombre: {this.state.persona.nombre}</h1>
);
}
}
Opción 2 (con variables de instancia):
class SubComponente extends React {
constructor(props) {
super(props);
this.persona = props.persona;
}
componetWillReceiveProps(props) {
this.persona = props.persona;
}
render() {
return (
<h1>Nombre: {this.persona.nombre}</h1>
);
}
}
Por complejidad del trabajo (necesito varios métodos para llamar dentro de SubComponente
) si o sí necesito una clase, por ende, no puedo realizar lo siguiente, que sería lo más limpio:
function SubComponente(props) {
return (
<h1>Nombre: {props.persona.nombre}</h1>
);
}
Las dudas que me surjen son: Ambas opciones funcionan, pero,
- ¿Cuál de las dos es mejor? En cuanto performance, mentinibilidad,etc
- ¿Estoy ejecutando una mala práctica? Es decir, ¿hay una mejor alternativa para manejar estos casos?
Hasta ahora no me crucé con ejemplos que aborden este problema. Me sería de gran ayuda.
Desde ya, muchas gracias