javascript - ciclo - react js tutorial español pdf

¿En React.js debo hacer mi solicitud de red inicial en componentWillMount o componentDidMount?

Question

En los documentos de reacción, recomienda realizar solicitudes de red iniciales en el método componentDidMount :

componentDidMount() se invoca inmediatamente después de montar un componente. La inicialización que requiere nodos DOM debe ir aquí. Si necesita cargar datos desde un punto final remoto, este es un buen lugar para crear una instancia de la solicitud de red. El estado de configuración en este método activará una nueva representación.

Si se llama a componentWillMount antes de representar el componente, ¿no es mejor realizar la solicitud y establecer el estado aquí? Si lo hago en componentDidMount , el componente se representa, se realiza la solicitud, se cambia el estado y luego se vuelve a representar el componente. ¿Por qué no es mejor realizar la solicitud antes de que se genere algo?

Answer 1

Debe hacer solicitudes en componentDidMount .

Si se llama a componentWillMount antes de representar el componente, ¿no es mejor realizar la solicitud y establecer el estado aquí?

No, porque la solicitud no terminará en el momento en que el componente se renderice de todos modos.

Si lo hago en componentDidMount, el componente se representa, se realiza la solicitud, se cambia el estado y luego se vuelve a representar el componente. ¿Por qué no es mejor realizar la solicitud antes de que se genere algo?

Porque cualquier solicitud de red es asíncrona . De todos modos, no puede evitar un segundo renderizado a menos que haya guardado en caché los datos (y en este caso no tendría que descartar la solicitud). No se puede evitar un segundo renderizado disparándolo antes. No va a ayudar

En futuras versiones de React, esperamos que componentWillMount se active más de una vez en algunos casos, por lo que debería usar componentDidMount para las solicitudes de red .

Answer 2

Debe realizar la solicitud en componentDidMount, ya que no se deben realizar solicitudes de efectos secundarios en componentWillMount. Está bien establecerState en componentWillMount, si configuraState en componentDidMount, inmediatamente activará una segunda representación.

Leerá que es un antipatrón (UGHHH) y algunos linters lo tienen prohibido (eslint-reactive-plugin), pero no le prestaría mucha atención, ya que a veces es la única forma de interactuar con el DOM. Puede establecer su estado predeterminado en willMount o como una propiedad de método (estado = {}), si está usando la etapa babel asociada

Como dice, el componente ya se procesará una vez, pero esto es bueno porque puede mostrar algún tipo de cargador o cualquier otra forma de información que se está cargando un recurso.

class MyComp extends Component {

    // What I do with stage 0
    state = { mystate: 1 }

    // What you might want to do if you''re not 
    // on the experimental stage, no need to do 
    // the whole constructor boilerplate
    componentWillMount() {
        this.setState({ mystate: 1 });
    }

    componentDidMount() {
        dispatch(yourAction());

        // It''s fine to setState here if you need to access 
        // the rendered DOM, or alternatively you can use the ref
        // functions
    }

    render() {
        if (!this.props.myCollection) return <Loader />

        return (
           <div> // your data are loaded </div>
        )
    }
}

Answer 3

Debe utilizar componentDidMount .

¿Por qué no es mejor realizar la solicitud antes de que se genere algo?

Porque:

• Es muy probable que su solicitud no finalice antes de que se genere el componente (a menos que se muestren grandes cantidades de marcado, o que esté en una conexión de entrelazamiento cuántico de latencia cero) , y el componente finalmente deberá volver a renderizarse, la mayoría de las veces
• También se llama a componentWillMount durante la representación del lado del servidor (si corresponde)

Sin embargo, si tuviera que preguntar, ¿no es mejor iniciar una solicitud en componentWillMount (sin manejarlo realmente en su lugar), definitivamente diría que sí (ES6), y lo hago yo mismo para cortar ocasionalmente algunos milisegundos de la carga? veces:

componentWillMount() {
    // if window && window.XMLHttpRequest
    if (!this.requestPromise) {
        this.requestPromise = new Promise(resolve => {
            // ... perform request here, then call resolve() when done.
        });
    }
}

componentDidMount() {
    this.requestPromise.then(data => ...);
}

Esto comenzará a precargar su solicitud durante componentWillMount , pero la solicitud solo se maneja en componentDidMount , ya se haya completado para ese momento o aún esté en curso.