javascript - componentdidmount - componentwillmount example

constructor vs componentWillMount; ¿Qué componente puede hacerWillMount que un constructor no puede?

Question

Por lo que pude ver, lo único que un componentWillMount puede hacer y un constructor no puede es llamar a setState .

componentWillMount() {
    setState({ isLoaded: false });
}

Como todavía no hemos llamado render , un setState en componentWillMount preparará el objeto de estado antes de que setState el primer pase de render() . Que es esencialmente lo mismo que hace un constructor :

constructor(props) {
    super(props);
    this.state = { isLoaded: false };
}

Pero veo otro caso de uso donde componentWillMount es útil (en el lado del servidor).

Consideremos algo asincrónico:

componentWillMount() {
    myAsyncMethod(params, (result) => {
        this.setState({ data: result });
    })
}

Aquí no podemos usar el constructor como asignación a this.state . this.state no activará render() .

¿Qué pasa con setState en componentWillMount ? De acuerdo con los documentos React :

componentWillMount() se invoca inmediatamente antes de que se produzca el montaje. Se llama before render( ), por lo tanto, establecer el estado en este método no desencadenará una nueva representación. Evite introducir efectos secundarios o suscripciones en este método.

Por lo tanto, creo que React usará el nuevo valor de estado para la primera representación y evitará una nueva representación.

Pregunta 1: ¿Esto significa, dentro de componentWillMount , si llamamos a setState en una devolución de llamada de método asíncrono (puede ser una devolución de llamada de promesa), React bloquea la representación inicial hasta que se ejecuta la devolución de llamada?

Teniendo esta configuración en el lado del cliente (sí, veo ese caso de uso en la representación del lado del servidor), si supongo que lo anterior es cierto, no veré nada hasta que se complete mi método asincrónico.

¿Me estoy perdiendo algún concepto?

Pregunta 2: ¿Hay algún otro caso de uso que pueda lograr con componentWillMount solamente, pero sin usar el constructor y componentDidMount ?

Answer 1

¿Esto significa, dentro de componentWillMount, si llamamos a setState en una devolución de llamada de método asíncrono (puede ser una devolución de llamada de promesa), React bloquea la representación inicial hasta que se ejecuta la devolución de llamada?

No, mira here .

El siguiente código no bloquea el procesamiento (tenga en cuenta que esto sería un patrón anti de todos modos para llamar a setState allí)

componentWillMount: function() {
     new Promise((resolve, reject) => {
        setTimeout(()=> {
            resolve();
        }, 2000)
     }).then(() => this.setState({ promiseResult: ''World'' }));
  },

Pregunta 2: ¿Hay algún otro caso de uso que pueda lograr con componentWillMount solamente, pero sin usar el constructor y componentDidMount?

No, para las clases de ES6 puedes descartar componentWillMount . Solo es necesario si usa React.createClass({... })

EDITAR: Aparentemente, estoy equivocado. Gracias a @ Swapnil por señalar esto. Aquí está la discussion .

React arroja una advertencia si hay un efecto secundario en el constructor que modifica el estado en otro componente, porque asume que se establece setState en el propio constructor y potencialmente durante el proceso de render() . Entonces no se desean efectos secundarios en el constructor .

Este no es el caso si lo hace en componentWillMount , no se generan errores. Por otro lado, los chicos de Facebook desalientan los efectos secundarios en el componentWillMount también. Entonces, si no tiene ningún efecto secundario, podría usar el constructor lugar de componentWillMount . Para los efectos secundarios, se recomienda utilizar componentDidMount lugar de componentWillMount . De cualquier manera, no necesita componentWillMount .