Estados simples: React.Component vs. useState

3/19
Recursos

Aportes 6

Preguntas 0

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

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>
        );
    }
}

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);

Esto { } se llama llaves, aunque despu√©s de tantos tutoriales en ingl√©s le digo curly braces ūüėā