0

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,

  1. ¿Cuál de las dos es mejor? En cuanto performance, mentinibilidad,etc
  2. ¿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

2 respuestas 2

0

Para efectos de performance, es mejor, setear el state con los props

constructor(props) {
    super(props);

    this.state = {
        persona: props.persona
    };
}

Luego pasas props:

render() {
    return (
        <SubComponente
            persona={this.state.persona}
        />
    );
}

}

Asi no tienes que estar llamando tanto al componente padre. Aca puedes encontrar mas info: https://reactjs.org/docs/render-props.html

Saludos!

1
  • Hola Cesar, gracias por responder. Lamentablemente ambas opciones que mencioné son mala práctica. Ahí respondí mi propia pregunta con la respuesta de un usuario de Stack Overflow donde exponen la solución correcta! Saludos y gracias de nuevo!
    – Genarito
    el 6 sep. 2018 a las 12:44
0

Publiqué la misma pregunta en Stack Overflow y obtuve una excelente respuesta: puedo simplemente usar this.props.persona sin necesidad de estas sincronizando variables de instancia.

Para más lujo de detalle, ver directamente la respuesta.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.