Componentes basados ​​en clases de ReactJS

Los componentes basados ​​en la clase React son el pan y la mantequilla de la mayoría de las aplicaciones web modernas creadas en ReactJS. Estos componentes son clases simples (compuestas por múltiples funciones que agregan funcionalidad a la aplicación). Todos los componentes basados ​​en clases son clases secundarias para la clase Component de ReactJS. 
 

Ejemplo: Programa para demostrar la creación de componentes basados ​​en clases. Cree una aplicación React y edite App.js como:

Nombre de archivo- App.js:

import React from "react";
 
class App extends React.Component {
  render() {
    return <h1>GeeksForGeeks</h1>;
  }
}
 
export default App;

 Producción: 

Una vez que se declara un componente, se puede utilizar en otros componentes. Programa para demostrar el uso de componentes basados ​​en clases en otros componentes. 

Ejemplo: abra el archivo App.js y reemplace el código con el siguiente código.

import React from "react";
 
class Sample extends React.Component {
  render() {
    return <h1>A Computer Science Portal For Geeks</h1>;
  }
}
 
class App extends React.Component {
  render() {
    return <Sample />;
  }
}
 
export default App;

Producción: 

La característica principal de los componentes basados ​​en clases que los distingue de los componentes funcionales es que tienen acceso a un estado que dicta el comportamiento actual y la apariencia del componente (más tarde, con React Hooks introducidos en la versión 16.8, podemos declarar un estado componente sin declarar una clase). Este estado se puede modificar llamando a la función setState() . Una o más variables, arrays u objetos definidos como parte del estado se pueden modificar a la vez con la función setState() .
 

Ejemplo: programa para demostrar el uso del estado en componentes basados ​​en clases. Abra el archivo App.js y reemplace el código con el siguiente código. 

import React from "react";
 
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { change: true };
  }
  render() {
    return (
      <div>
        <button
          onClick={() => {
            this.setState({ change: !this.state.change });
          }}
        >
          Click Here!
        </button>
        {this.state.change ? (
          <h1>Welcome to GeeksforGeeks</h1>
        ) : (
          <h1>A Computer Science Portal for Geeks</h1>
        )}
      </div>
    );
  }
}
 
export default App;

Producción:

Los datos se pasan a otros componentes con la ayuda de props. Los accesorios funcionan de manera similar para todos los componentes en ReactJS, ya sea que estén basados ​​en clases o sean funcionales. Los accesorios siempre se transmiten del componente principal al componente secundario. ReactJS no permite que un componente modifique sus propios accesorios como regla. La única forma de modificar los accesorios es cambiar los accesorios que se pasan del componente principal al componente secundario. Esto generalmente se hace pasando una referencia a una función en el componente principal, que cambia los accesorios que se pasan al componente secundario.
 

Ejemplo: Programa para demostrar el uso de props en componentes basados ​​en clases. Abra el archivo App.js y reemplace el código con el siguiente código. 

import React from "react";
 
class App extends React.Component {
  render() {
    return <h1>{this.props.data}</h1>;
  }
}
 
class propsExample extends React.Component {
  constructor(props) {
    super(props);
    this.state = { change: true };
  }
  render() {
    return (
      <div>
        <button
          onClick={() => {
            this.setState({ change: !this.state.change });
          }}
        >
          Click Here!
        </button>
        {this.state.change ? (
          <Pass data="Welcome to GeeksforGeeks" />
        ) : (
          <Pass data="A Computer Science Portal for Geeks" />
        )}
      </div>
    );
  }
}
 
export default App;

 
Producción:
 

 Los componentes basados ​​en clases tienen acceso a las funciones del ciclo de vida como componentWillMount() , componentDidMount() , componentWillReceiveProps() , componentWillUpdate() , shouldComponentUpdate() , render() y componentWillUnmount() ;. Estas funciones del ciclo de vida se llaman en diferentes etapas del ciclo de vida y se utilizan para una variedad de propósitos, como cambiar el estado o realizar algún trabajo (como obtener datos de una API externa). También se conocen como ganchos de ciclo de vida . 
 

Ejemplo: programa para demostrar el uso de enlaces de ciclo de vida. Abra el archivo App.js y reemplace el código con el siguiente código.

import React from "react";
 
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { text: "Welcome!" };
  }
 
  componentWillMount() {
    this.setState({
      text: "GeeksforGeeks",
    });
  }
 
  render() {
    return <h1>{this.state.text}</h1>;
  }
}
 
export default App;

 
Producción: 

Los componentes basados ​​en clases son un poco más lentos que sus contrapartes funcionales. La diferencia es muy pequeña y casi insignificante para aplicaciones web más pequeñas, aunque la diferencia de rendimiento aumenta cuando aumenta la cantidad de componentes en la aplicación. Además, los componentes basados ​​en clases implican mucha más codificación por parte del programador, lo que los hace un poco más ineficientes de usar.