¿Qué es el componente basado en estado/clase en ReactJS?

Componentes basados ​​en la clase React : estos 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. Una vez que se declara un componente, se puede utilizar en otros componentes.

Crear aplicación React:

Paso 1: ejecute Crear aplicación de reacción usando el siguiente comando.

npx create-react-app foldername

Paso 2: cambie el directorio a esa carpeta ejecutando el comando:

cd foldername

Estructura del proyecto: Tendrá el siguiente aspecto.

Ejemplo 1: Programa para demostrar la creación de un componente basado en clases.

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

Paso para ejecutar la aplicación: Abra la terminal y escriba el siguiente comando.

npm start

Producción:

Estado en componentes de clase : 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. El estado es una instancia de React Component Class se puede definir como un objeto de un conjunto de propiedades observables que controlan el comportamiento del componente. En otras palabras, el estado de un componente es un objeto que contiene cierta información que puede cambiar durante la vida útil del componente. Por ejemplo, pensemos en el reloj que creamos en este artículo ., estábamos llamando explícitamente al método render() cada segundo, pero React proporciona una mejor manera de lograr el mismo resultado y es usando State, almacenando el valor del tiempo como miembro del estado del componente. Veremos esto más detalladamente más adelante en el artículo. 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 2: programa para demostrar el uso de estado y accesorios 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:

Props en componentes de clase: los datos se pasan a otros componentes con la ayuda de props. Los accesorios funcionan de manera similar para todos los componentes de ReactJS, ya sean funcionales o basados ​​en clases. 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. Podemos acceder a cualquier accesorio desde dentro de la clase de un componente usando la sintaxis anterior. El ‘this.props’ es una especie de objeto global que almacena todos los accesorios de los componentes. El nombre de la propiedad, es decir, los nombres de los accesorios son claves de este objeto.

Ejemplo 3: 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 Name extends React.Component{
  
  
    render() {
        return(
        <div>
     <h1>{this.props.data}</h1>
      
        </div>
        )
    }
    }
      
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 ? (
        <Name data="Welcome to GeeksforGeeks" />
        ) : (
        <Name data="A Computer Science Portal for Geeks" />
        )}
    </div>
    );
}
}
  
export default PropsExample;

Producción: