Consejos Tecnológicos

¿Qué es el método del ciclo de vida de los componentes de React?

¡Se trata de componentes!

Una de las razones por las que React es popular es el concepto de componentes web reutilizables, lo que podemos lograr mediante el uso de componentes funcionales. Esto significa que el mismo componente se puede reutilizar para mostrar información diferente a través de diferentes atributos.

existe resistenciaacción, El componente representa una parte de la interfaz de usuario. Los componentes funcionales se denominan así porque los crea escribiendo las funciones que se muestran a continuación. En un componente funcional, todo lo que necesita hacer es devolver el JSX que desea que represente el componente. El código del componente generalmente se coloca en un archivo JavaScript.

existe resistenciaacción Hay dos tipos de componentes

  • Componente funcional sin estado
  • Componente de clase con estado

Los componentes funcionales son en realidad funciones de JavaScript que devuelven HTML que representa la interfaz de usuario.

import React from "react" 
import ReactDOM from "react-dom" 
function TestApp()  
    return ( 
<div> 
   < h1 >Code goes here</h1> 
</div> 
  ) 
 
ReactDOM.render( 
  <TestApp />, 
  document.getElementById("root") 
) 
 

En el componente funcional, puede pasar Accesorios A la función en sí y dentro del código, puede decir props. lo que sea Como sigue:

    function TestApp(props) { 
    return ( 
<div> 
   <h1>props.whatever</h1> 
</div> 
  ) 
 

A medida que profundicemos en React, descubriremos que los componentes funcionales no pueden hacer todas las cosas que necesitamos que hagan. Entonces aquí es donde los componentes de la clase pueden ayudar. Veamos cómo convertir los componentes funcionales anteriores en componentes basados ​​en clases.

Los componentes basados ​​en clases son básicamente clases es6. Al igual que los componentes funcionales, los componentes de la clase también pueden optar por recibir accesorios como entrada y devolver HTML. Además de los accesorios, un componente de clase también puede mantener un estado interno privado; por ejemplo, puede mantener cierta información privada del componente.

Básicamente, si necesita estado o Enfoque del ciclo de vida, Tendrá que utilizar componentes basados ​​en clases. Todos los componentes basados ​​en clases son subclases de la clase Component. Se requiere al menos un método en cada componente de clase, es decir, el método de representación. Este componente de clase es el mismo que el componente funcional anterior.

          import React from "react" 
class TestApp extends React.Component { 
    render() { 
        return ( 
            <div> 
                < h1 >Code goes here</h1> 
            </div> 
        ) 
     
 
export default TestApp 

Usando componentes basados ​​en clases, cada vez que necesitemos usar accesorios this.props Como sigue:

import React, Component from "react" 
class TestApp extends React.Component {  
    someMethodHere() {         
       
    render() { 
        return ( 
            <div> 
                < h1 >this.props.whatever</h1> 
            </div> 
        ) 
     
  
export default TestAppp 

Comprender el ciclo de vida:

Cada componente que creamos pasará por una serie de etapas en el ciclo de vida de una aplicación React, cuando se procesa y actualiza.

El enfoque del ciclo de vida se divide en diferentes partes. Permítanme hablarles sobre los métodos más importantes y los métodos más utilizados.

El primer método de ciclo de vida comúnmente utilizado es el método de renderizado, que generalmente no se incluye como método de ciclo de vida. Su función es determinar exactamente qué se muestra en la pantalla; esto, a su vez, es cómo se muestra el componente al mundo. El método de renderizado se puede llamar varias veces. Cada vez que React determina que cambios como el estado o los accesorios pueden afectar la forma en que se muestra el componente, React puede ejecutar el método de renderizado nuevamente.

render() { 
        return ( 
            <div> 
                Code goes here 
            </div> 
        ) 
     

Método de ciclo de vida:

React nos proporciona métodos integrados que pueden anularse en determinadas etapas del ciclo de vida.

Los métodos de ciclo de vida disponibles para los componentes de la clase son:

  1. Instalar en pc
  2. actualizacion
  3. Desinstalar
  4. Manejo de errores

Instalar en pc:

Cuando se crea una instancia del componente y se inserta en el modelo de objetos de documento (DOM), se llama al método de ciclo de vida de montaje. Hay cuatro métodos en la fase de instalación:

  • Constructor
  • Estático getDerivedstatefromprops
  • Hazlo
  • Montaje de componentes

Echemos un vistazo al orden de ejecución.

Constructor —-> Estático getDerivedstatefromprops —> Renderizado —> ComponentDidmount

import React,  Component  from “react”           
Class TestApp extends  Component 
constructor(props)  
super(props) 
this.state =  
name = ‘Test app’ 
  
console.log(‘TestApp’) 
 
static getDerivedStateFromProps(props, state)  
console.log(‘getDerivedStateFromProps') 
return null 
 
componentDidMount()  
console.log(‘componentDidMount') 
 
render()  
console.log(render')   
return (   
<div> TestApp </div>   
 ) 
 
  
export default TestApp

renovar:

Cuando un componente se vuelve a renderizar debido a cambios en sus accesorios o estado, se llamará al método de ciclo de vida de actualización. Hay cinco métodos en la fase de actualización:

  • Estático getDerivedstatefromprops
  • Los componentes deben actualizarse
  • Hazlo
  • Tome una instantánea antes de actualizar
  • Se han actualizado los componentes

La secuencia de ejecución de este método es la siguiente:

Constructor (props) -> static getDerivedstatefromprops -> render -> getSnapshotBeforeUpdate → componentDidUpdate

import React,  Component  from “react”           
Class TestApp extends  Component 
constructor(props)  
super(props); 
this.state =  
name = ‘Test app’ 
  
console.log(‘TestApp’) 
 
static getDerivedStateFromProps(props, state)  
console.log(‘getDerivedStateFromProps') 
return null 
 
getSnapshotBeforeUpdate (prevProps, prevState)  
console.log(‘getSnapshotBeforeUpdate’) 
 
componentDidUpdate (prevProps, prevState, snapshot)  
console.log(‘getSnapshotBeforeUpdate’) 
 
render()  
console.log(‘render')   
return (   
<div> TestApp </div>   
) 
  
  
export default TestApp

Desinstalar:

Cuando el componente se elimina del DOM, se llama al método del ciclo de vida UnMounting. Solo hay un método en la fase de desmontaje:

Echemos un vistazo al orden de ejecución de este método:

import React,  Component  from “react”          
Class TestApp extends  Component
constructor(props) 
super(props);
this.state = 
name = ‘Test app’
 
console.log(‘TestApp’)

componentWillUnmount() 
console.log(‘componentWillUnmount’)
 
render() 
console.log(‘render')  
return (  
 <div> TestApp </div>  
)


export default TestApp

Manejo de errores:

El método de ciclo de vida de manejo de errores se llama cuando se produce un error durante la representación del método de ciclo de vida. Hay dos métodos en la fase de desmontaje:

  • StaticgetDerivedstatefromError
  • Componente DidCatch

Echemos un vistazo al orden de ejecución de este método:

Constructor (props) ————–> StaticgetDerivedstatefromError -> componentDidCatch

import React,  Component  from “react”          
Class TestApp extends  Component
constructor(props) 
super(props);
this.state =  hasError: false
console.log(‘TestApp’)

static getDerivedStateFromError(error) 
return  hasError: true ;
 
componentDidCatch(error, errorInfo) 
errorService.log( error, errorInfo );
 
render() 
console.log(‘render')  
return (  
 <div> TestApp </div>  
 )


export default TestApp

Componente DidMount:

Este es uno de los métodos en la fase de montaje y se define de la misma manera que cualquier otro método de la clase. Esto es esencialmente como decir «recién naciste», de hecho, este componente solo se instala en la pantalla.

Cuando el componente aparece por primera vez, React ejecutará el método componentDidMount. El caso de uso más común de componentDidMount es realizar operaciones similares a las llamadas a la API cuando necesitamos obtener datos de alguna fuente externa.

Por ejemplo, supongamos que el siguiente componente es una lista de nombres, y necesito obtenerlo de una base de datos de origen externa o de algún servidor, y luego la lista de nombres se puede mostrar con precisión. Una vez instalados los componentes, podemos obtener los datos que necesitamos mostrar.

import React, Component from "react"
class ListOfNames extends Component 
super()
this.state = 

componentDidMount() 
// Get the data which is list of names to display it correctly  
   
render() 
return (
<div>
Code goes here
</div>
 )

 }
export default ListOfNames

componenteDidUpdate:

Este es un método en la fase de actualización. Cuando el padre pasa su estado a través de los accesorios, y luego el estado cambia, React pasará el valor actualizado al componente a través de los accesorios y volverá a renderizar el componente para que pueda actualizar los accesorios en función de los accesorios recibidos. En componentDidUpdate, si queremos, podemos hacer más cosas basadas en cambios en los accesorios.

Por ejemplo, si este componente está recibiendo accesorios que utiliza para hacer llamadas a la API, y los nuevos accesorios entrantes requieren que el componente realice otra llamada API a un punto final diferente, componentDidUpdate nos permite verificar si el accesorio ha cambiado. Si es así, por favor Realice llamadas a la API.

Dado que componentDidUpdate proviene de la superclase Component, no necesitamos vincularlo a nuestro propio componente. Lo mismo es cierto para cualquier método de ciclo de vida prediseñado (como componentDidMount). En componentDidUpdate, obtendrá prevProps y prevProps, porque la actualización ya se ha producido. El estado anterior es el estado actual, por lo que no tenemos estados o elementos próximos.

import React, Component from "react"
class ListOfNames extends Component {
constructor() 
super()
this.state = 
componentDidUpdate(prevProps, prevState) 
console.log(“componentDidUpdate”,prevProps,prevState);

render() 
return (
<div>
Code goes here
</div>
)


export default ListOfNames

shouldComponentUpdate ():

Este también es uno de los métodos en la fase de actualización, que nos da la oportunidad de optimizar la aplicación. Podemos implementar algo de lógica en este método para permitir que el componente determine si es importante considerar la actualización.

Para ayudar a tomar esta decisión, el método shouldComponentUpdate recibirá los accesorios entrantes y el estado entrante, y llamará a nextProps y nextState como se muestra a continuación.

A continuación, si desea actualizar, shouldComponentUpdate devuelve verdadero, si no desea actualizar, devuelve falso. Devolver false de shouldComponentUpdate aumentará el rendimiento de la aplicación.

import React, Component from "react"
class ListOfNames extends Component {
constructor() 
super()
this.state = 
shouldComponentUpdate(nextProps, nextState) 
// or return false  if not to update  

render() 
return (
div>
Code goes here
</div>
)
 

export default ListOfNames


Resumen:

En este blog, discutimos dos tipos diferentes de componentes, componentes funcionales y componentes de clase, y sus respectivas funciones. Básicamente, si necesita métodos de estado o ciclo de vida, debe usar componentes basados ​​en clases; de lo contrario, usar componentes funcionales es una buena práctica. Hablamos de los accesorios, que son la forma principal de pasar datos por el árbol de componentes, y también hablamos del estado que permite que los componentes retengan y modifiquen datos.

Publicaciones relacionadas

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Botón volver arriba