Crea una cuenta o inicia sesión

¡Continúa aprendiendo sin ningún costo! Únete y comienza a potenciar tu carrera

Estados simples: React.Component vs. useState

3/19
Recursos

Aportes 14

Preguntas 2

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

o inicia sesión.

El estado en los class components tambien se puede declarar de esta forma, omitiendo el metodo contructor.

Considero que, aunque no dudo que podría tener sus ventajas utilizar componentes con clases, encuentro redundancia sintáctica para manejar los estados, creo que los componentes con funciones y utilizando los Hooks son una alternativa muy viable para desarrollar en Reactjs. Ustedes qué opinan, PlatziNautas 🌎?

Resumen de la clase:

Conoceremos las diferencias entre los componentes creados con clases utilizando React.component y los componentes creados con funciones utilizanod React Hook en el manejo de las propiedades y el estado.

Envio de propiedades (props)
Se envia de la misma forma, sea el componente creado con clase o función:

import { UseState } from './UseState';
import { ClassState } from './ClassState';
import './App.css';

function App() {
  return (
    <div className="App">
      <UseState name="Use State" />
      <ClassState name="Class State" />
    </div>
  );
}

export default App;

Manejo de propiedades en funciones
Para el manejo de propiedades debemos recibirlo como parámetro props el cual puede ser destructurado en las propiedades enviadas

function UseState({ name }) {
    const [error, setError] = React.useState(true);

    return (
        <div>
            <h2>Eliminar {name}</h2>
            <p>Por favor, escriba el código de seguridad.</p>

            {error && (
                <p>El código es es incorrecto</p>
            )}

            <input type='text' placeholder='código de seguridad'/>
            <button>Comprobar</button>
        </div>
    );
}

Manejo de propiedades en clases
Para el manejo de propiedades escribimos this.props para acceder a las propiedades de nuestro elemento

class ClassState extends React.Component {
    render () {
        return (
            <div>
                <h2>Eliminar {this.props.name}</h2>
                <p>Por favor, escriba el código de seguridad.</p>
                <input type='text' placeholder='código de seguridad'/>
                <button>Comprobar</button>
            </div>
        );
    }
}

Manejo de estado en funciones
Utilizamos la siguiente sintaxis para declarar e inicializarr un estado y su modificador de valor.

function UseState({ name }) {
    // estado error
    const [error, setError] = React.useState(true);

    return (
        <div>
            <h2>Eliminar {name}</h2>
            <p>Por favor, escriba el código de seguridad.</p>

            {error && (
                <p>El código es es incorrecto</p>
            )}

            <input type='text' placeholder='código de seguridad'/>
            <button
                // onClick={()=>setError(!error)}
                onClick={()=>setError(prevState=>!prevState)}
            >Comprobar</button>
        </div>
    );
}

export { UseState }

Manejo de estado en clases

  • En el método constructor utilizamos this.state para definir un objeto cuyas propiedades serán los estados
  • Para poder modificar this y conservar lo que vivía en this de la clase que extendemos se debe llamar a super() dentro del método constructor.
  • Luego debemos recibir las props desde el constructor y enviarle a super todas las propiedades que recibimos, de esta forma no solo vivirán en el constructor de nuestra clase sino también pasar a la clase React.component
  • Una propiedad que viene de React.component es this.setState, con esta modificaremos los estados.
class ClassState extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            error:false,
        }
    }

    render () {
        return (
            <div>
                <h2>Eliminar {this.props.name}</h2>
                <p>Por favor, escriba el código de seguridad.</p>

                {this.state.error && (
                    <p>El código es es incorrecto</p>
                )}

                <input type='text' placeholder='código de seguridad'/>
                <button
                    // onClick={()=>this.setState({ error: !this.state.error})}
                    onClick={()=>this.setState(prevState => ({error: !prevState.error}))}
                >Comprobar</button>
            </div>
        );
    }
}

Esto { } se llama llaves, aunque después de tantos tutoriales en inglés le digo curly braces 😂

Gracias a dios salieron los Hooks y los componentes como funciones.
Que enredo manejar eso con clases

Props
Las props, en los componentes construídos con React.Component, al ser clases las recibimos usando this.props a diferencia de los componentes con funciones que solamente llamamos llamar en los parámetros de esta a props o bien desenpaquetamos props.
.
Estado
Para crear el estado en componente con funciones simplemente tenemos que llamar al hook useState. El nombre del estado y el modificador del estado pueden llamarse como sea.

const [error, setError] = React.useState(true);

En los componentes construídos con React.Component debemos crear nuestro método constructor, pasarle como parámetro las props, al método super(); pasarle las props (esto para tener acceso a los métodos de React.Component).
.
En el constructor crearemos nuestro estado con this.state. En este objeto almacenará todos nuestros estados.

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

Para modificar nuestro estado usaremos el método this.setState, que tenemos acceso a este porque mandamos a llamar super(props);. Con este método podemos cambiar nuestros estados.

<button
	onClick={() => this.setState({ error: !this.state.error })}
>
	Comprobar
</button>

Pueden agregar al import

import React, { useState } from "react";

y luego pueden utilizar useState sin necesidad de agregar React.useState.

const [error, setError] = useState(false);

Para mejorar la experiencia de desarrollo con react, aquí va estas recomendaciones:

  • Crea tu proyecto react con vite como bundler
  • Usa el formato .jsx para tus componentes
  • Configura prettier y eslint para react en tu proyecto
  • Configura en tu vscode el autoformateador y organizador de import al guardar
  • Usa la extensión ‘ES7+ React/Redux/React-Native snippets’

Hola,

Así sería en Español e Inglés

() => Paréntesis => parentheses
[] => Corchetes => brackets o square brackets
{} => Llaves => curly brackets

Aqui les dejo mis apuntes por si les hacen falta.

😃

vivan los hooks xd

Conclusión: ¡Gracias a Dios por los hooks!

Asi quedaria con typescript el componente

import { Component } from "react";

interface ClassStateProps {
  name: string;
}
interface stateComponent {
  error: boolean;
}
class ClassState extends Component<ClassStateProps, stateComponent> {
  state: stateComponent = {
    error: false,
  };
  render() {
    const { name } = this.props;
    return (
      <div>
        <h2> Eliminar {name}</h2>
        <p>Por favor, escribe el codigo de seguridad.</p>
        {this.state.error && (
          <p>
            <strong>Error:</strong> El codigo es incorrecto
          </p>
        )}
        <input placeholder="Codigo de seguridad" />
        <button onClick={() => this.setState({ error: !this.state.error })}>
          Comprobar
        </button>
      </div>
    );
  }
}
export { ClassState };