¿Puedo llamar API en componentWillMount en React?

Estoy trabajando en reactjsr durante el último año. La convención que seguimos es hacer una llamada a la API en componentDidMount , obtener los datos y setState después de que los datos hayan llegado. Esto asegurará que el componente se haya montado y el estado de configuración causará una nueva representación del componente, pero quiero saber por qué no podemos establecer Estado en componentWillMount o constructor

La documentación oficial dice que:

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

dice que setting state in this method will not trigger a re-rendering , lo que no deseo al realizar una llamada a la API. Si puedo obtener los datos y establecerlos en el estado (asumiendo que las llamadas a la API son realmente rápidas) en componentWillMount o en el constructor y los datos están presentes en el primer procesamiento, ¿por qué querría volver a renderizarlos?

y si la llamada a la API es lenta, entonces setState será asíncrono y componentWillMount ya habrá regresado, entonces podré configurarState y debería ocurrir una nueva representación.

En general, estoy bastante confundido de por qué no deberíamos hacer llamadas a la API en el constructor o componentWillMount. ¿Puede alguien realmente ayudarme a entender cómo funciona reactjsr en tal caso?

3 Solutions collect form web for “¿Puedo llamar API en componentWillMount en React?”

1. componentWillMount y la representación

Compara estos dos métodos componentWillMount .
Uno causa un re-render adicional, uno no

 componentWillMount () { // This will not cause additional re-render this.setState({ name: 'Andrej '}); } componentWillMount () { fetch('http://whatever/profile').then(() => { // This in the other hand will cause additional rerender, // since fetch is async and state is set after request completes. this.setState({ name: 'Andrej '}); }) } 

.
.
.
2. ¿Dónde invocar llamadas a la API?

 componentWillMount () { // Is triggered on server and on client as well. // Server won't wait for completion though, nor will be able to trigger re-render // for client. fetch('...') } componentDidMount () { // Is triggered on client, but never on server. // This is a good place to invoke API calls. fetch('...') } 

Si está renderizando en el servidor y su componente necesita datos para renderizar, debe buscar (y esperar a que se complete) fuera del componente y pasar los datos a través de los accesorios y procesar el componente a la cadena posteriormente.

ComponentWillMount

Ahora que los accesorios y el estado están establecidos , finalmente ingresamos al ámbito de los métodos del ciclo de vida

Eso significa que React espera que el state esté disponible, ya render función de render se llamará a continuación y el código puede interrumpirse si falta alguna de las variables de estado mencionadas, lo que puede ocurrir en el caso de ajax .


Constructor

Este es el lugar donde se define.

Entonces, llamar a un ajax no actualizará los valores de ningún estado ya que ajax es async y el constructor no esperará la respuesta. Idealmente, debería usar el constructor para establecer valores predeterminados / iniciales .


Idealmente, estas funciones deberían ser funciones puras, solo en función de los parámetros. Traer ajax trae efectos secundarios a la función.

Sí, las funciones dependen del state y el uso de this.setState puede traerle tales problemas ( Usted ha establecido un valor en el estado pero falta el valor en el estado en la siguiente función llamada ).

Esto hace que el código sea frágil. Si su API es realmente rápida, puede pasar este valor como un argumento y en su componente, verifique si este argumento está disponible. Si es así, inicialice su estado con él. Si no es así, ajústelo a predeterminado. Además, en la función de éxito de ajax, puede verificar la ref de este componente. Si existe, el componente se procesa y puede llamar a su state utilizando setState o cualquier función de setState ( preferida ).

Además, recuerde que cuando dice que las llamadas a la API son realmente rápidas , su servidor y su procesamiento pueden tener una velocidad óptima, pero nunca puede estar seguro con la red.

Si solo necesita datos solo en la primera ejecución y si está de acuerdo con eso. Puede establecer Estado sincrónicamente llamando a una callback.

por ejemplo:

 componentWillMount(){ this.setState({ sessionId: sessionId, }, () => { if (this.state.hasMoreItems = true) { this.loadItems() // do what you like here synchronously } }); } 
  • Usar reactjsr-enrutador y express con authentication a través de Passport.js - posible?
  • Eliminar un elemento del estado de Redux
  • ¿Cuál es la mejor forma de usar react-networkingux con una biblioteca de terceros basada en events?
  • Reactjs: get datos del server y actualizar
  • ¿Cómo acceder al estado dentro del networkinguctor Redux?
  • Incluir y referencer una image en reactjsr con el package web
  • Formato de código con la label <pre> en React y JSX
  • date de formatting siempre y cuando dentro del componente reactjs
  • Reaccionar - ¿Cómo devolver uno de varios componentes en la function de renderizado?
  • ¿Cuál es la diferencia entre hashHistory y browserHistory en reactjsr enrutador?
  • Agregar un video de background con Reaccionar?
  • Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.