Consejos Tecnológicos

Utilice los componentes de React para comprender los constructores

React Constructor es un método que se llama automáticamente durante la creación de un objeto a partir de una clase. En pocas palabras, el constructor, al igual que su nombre, es una buena herramienta de construcción.

El constructor se utiliza para dos objetivos clave:

  • Inicialice el estado local del componente asignando el objeto a this.state
  • Controladores de eventos que ocurren en el componente enlazado

En este blog, lo llevaremos a través de todo el conocimiento sobre los constructores de React, incluidas las reglas a seguir para implementarlos. También estudiaremos cómo unir todos los eventos en un solo lugar y prestaremos atención a cómo asignar valores con precisión.

¿Qué es un constructor?

En una clase, el constructor es un método que se llama automáticamente cuando se crea un objeto de la clase. Por lo general, funciona así:

sintaxis:

Constructor(props){ 
    super(props);   
}

Algunos puntos a tener en cuenta sobre el constructor son:

  1. No es necesario tener un constructor en cada componente.
  2. Es necesario llamar a super () en el constructor. Para establecer propiedades o usar «this» en el constructor, se debe llamar a super ().

Debemos recordar que el método setState () no se puede usar directamente en el constructor (). Utilice «this.state» para asignar el estado inicial en el constructor. El constructor usa this.state para asignar el estado inicial, y otros métodos deben usar set.state ().

Llame a super (props) antes de usar this.props

En React, se llama al constructor durante la creación del componente y antes del montaje. Si desea implementar un constructor para un componente de React, llame al método super (props) antes que cualquier otra declaración. De lo contrario, esto. Los accesorios no estarán definidos en el constructor y crearán errores.

constructor() { 
 console.log(this.props); 
}

Usar super (accesorios) es muy simple. Solo necesitamos llamarlo en el método constructor del componente hijo:

constructor(props) {
 super(props);
 console.log(this.props);
}

Nunca llame al constructor interno setState () ()

El constructor es un lugar ideal para establecer el estado inicial del componente. En lugar de usar setState () en otros métodos, deberá asignar el estado inicial directamente.

class Hello extends React.Component { 
   constructor(props) { 
   super(props); 
   this.setState({ 
  title: 'This is the first test' 
   }); 
}   
  render() { 
    return 
{this.state.title}
  } }   ReactDOM.render(, document.getElementById('container'));

Cuando usa el método setState () en React, no solo le asigna un nuevo valor. Expresar. También vuelve a renderizar el componente y todos sus subcomponentes. Además, si intenta actualizar la clase definida en el constructor, recibirá un error, por lo que debemos evitar usar setState () en el constructor, porque este es el único lugar donde asignamos directamente el estado inicial a this.state.

constructor(props) { 
 super(props); 
 this.state = { 
   name 'kapil', 
   age: 22, 
 }; 
}

Al crear un componente, evite establecer valores directamente desde las propiedades del componente. Siga los pasos a continuación:

constructor(props) {
 super(props);
 this.state = {
   name: props.name,
 };
}

Si intenta cambiar el atributo de nombre en el objeto de estado, no funcionará. Si desea modificar esta propiedad más adelante, no debe usar setState (). En su lugar, use this.props para acceder a la propiedad del nombre directamente en su código. Nombre en lugar de asignarlo directamente al estado.

Vincular eventos en un solo lugar

En el constructor, puede vincular fácilmente controladores de eventos:

constructor(props) { 
 super(props); 
 this.state = { 
   // Sets that initial state 
 }; 
 // Our event handlers 
 this.onClick = this.onClick.bind(this); 
 this.onKeyUp = this.onKeyUp.bind(this); 
 // Rest Code 
}

Evite asignar valores de this.props a this.state

Puede resultar tentador establecer el estado del componente inmediatamente, pero puede causar algunos problemas. Un problema es que realmente no puede probarlo correctamente hasta que realice una llamada a la API y reciba una respuesta. Otra razón para evitar establecer el estado en el constructor es que una vez que se define el valor, no es necesario que vuelva a preocuparse por él.

Aunque este parece ser el método obvio, el constructor no siempre es el lugar adecuado para realizar llamadas a la API. Si su componente depende de otro estado disponible en su componente principal o abuelo, entonces puede considerar hacer una llamada a la API en componentDidMount (). De esta forma, no es necesario llamar a la API varias veces.

constructor(props) { 
  super(props);   
  this.state = { 
   Reptile: 'Alligator', 
  }; 
}

¿Incluso necesitas un constructor?

Componente de reacción Hay una característica útil como constructor. Los constructores son difíciles de administrar. Si el estado del componente no se mantendrá, no defina un constructor. Reaccionar aplicación Está construido con componentes funcionales. Si no necesita controladores de eventos o estados, es mejor no usar componentes de clase.

Función de flecha

Las funciones de flecha permiten escribir código más conciso y también le ayudan a utilizar correctamente el enlace «this». Si usa funciones de flecha, no necesita vincular ningún evento a «esto». El alcance de ‘esto’ es global y no se limita a ninguna función de llamada.

import React, { Component } from 'react';
class App extends Component {   
  constructor(props){   
    super(props);   
    this.state = {   
         data: 'ABC'   
      }   
  }   
  handleEvent = () => {   
    console.log(this.props);   
  }   
  render() {   
    return (   
      
     

React Constructor Example

                       
      );     }   }   export default App;

Uso de constructor

1) Inicialización del constructor de estados

class App extends Component {   
  constructor(props){   
        // here, it is setting initial value for 'inputTextValue'   
        this.state = {   
            inputTextValue: 'initial value',   
        };   
  }   
}

2) Utilice el método ‘este’ en el constructor

class App extends Component {   
    constructor(props) {   
        // when you use 'this' in constructor, super() needs to be called first   
        super();   
        // it means, when you want to use 'this.props' in constructor, call it as below   
        super(props);   
    }   
}

3) Inicialización de bibliotecas de terceros

class App extends Component {   
    constructor(props) {  
        this.myBook = new MyBookLibrary(); 
        //Here, you can access props without using 'this'   
        this.Book2 = new MyBookLibrary(props.environment);   
    }   
}

4) Ate algunos Contexto(esto) Cuando necesitamos pasar un método de clase al niño en props.

class App extends Component { 
    constructor(props) {   
        // when you need to 'bind' context to a function   
        this.handleFunction = this.handleFunction.bind(this);   
    }   
}

Programa de muestra:

Reaccionar componente usando el constructor

index.js 
import React from 'react'; 
import ReactDOM from 'react-dom'; 
class Main extends React.Component { 
  constructor() { 
    super(); 
    this.state = { 
      planet: "Earth" 
    } 
  } 
  render() { 
    return ( 
      < h1 >Hello {this.state.planet}! 
    ); 
  } 
} 
ReactDOM.render(
document.getElementById('root')); 

Producción:

Hello Earth! 

Reaccionar componente sin constructor

Index.js 
import React from 'react'; 
import ReactDOM from 'react-dom'; 
class Main extends React.Component { 
  state = { 
    planet: "Mars" 
  } 
  render() { 
    return ( 
      < h1 >Hello {this.state.planet}! 
    ); 
  } 
} 
ReactDOM.render(
document.getElementById('root')); 

Producción:

Hello Mars! 

Constructor y getInitialState

Constructor y Obtener el estado inicial Se usan para inicializar el estado en React, no se pueden usar indistintamente. La principal diferencia fundamental entre ES5 y ES6 es la nueva palabra clave de clase. ES5 no ofrece la conveniencia de definir los componentes de React como clases, pero ES dUna generaciónd Proporcionar conveniencia para definir componentes reactivos como clases.

Obtener el estado inicial Es una forma amigable de ES5 de definir el estado inicial de los componentes de React.usamos Obtener el estado inicial y React.createClass Y se usa el constructor Componente de reacción.

Por ejemplo

 class Goodmorning extends React.Component { 
  render() { 
    return Good Morning; 
  } 
}
It would rely on helper module called create-react-class: 
var createGoodmorningReactClass = require('create-react-class'); 
var Goodmorning = createReactClass({ 
  render: function() { 
    return Good Morning; 
  } 
}); 
The object passed into create-react-class that is defined in initial stage by calling the getInitialState attribute: 
 var Goodmorning = createReactClass({ 
  getInitialState: function() { 
    return {name: this.props.name}; 
  }, 
  render: function() { 
    return Good {this.state.name}; 
  } 
}); 
In ES6 implementation: 
class Goodmorning extends React.Component { 
  constructor(props) { 
    super(props); 
    this.state = { 
      name: props.name 
    } 
  } 
  render() { 
    return Good {this.state.name}; 
  } 
} 

ya sea Ctutor resistenciaMantenerse resistencia¿Un elefante?

reacción Es un marco de JavaScript muy poderoso.Comprender el ciclo de vida de sus componentes ayudará a desbloquear el potencial y el poder de React JavaScript marco.

Como Vemos en este blog como Tu construyes reacción Componentes El constructor es una de característicasegundo Es decirnortet es compatible con la función.

Por conveniencia, el constructor le permite definir variables e inicializarlas con valores predeterminados. Sin embargo, Si no hay inicialización de estado o enlace de método, no es necesario definir un constructor para el componente. En JavaScript. Como se muestra en este ejemplo, No obtendremos datos del constructor. y Ni lo hará Método de encuadernación Se debe establecer Estado inicial. Como dijeron, es importante comprender las reglas para comprender qué reglas se pueden romper. Esta es una buena manera de aprender cuándo es posible que desee crear varias instancias de una clase con diferentes valores. Se utiliza para funciones de miembros.

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