Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Curso Práctico de React.js

Curso Práctico de React.js

Oscar Barajas Tavares

Oscar Barajas Tavares

Tipos de componentes en React: stateful vs. stateless

14/29
Recursos

Aportes 7

Preguntas 3

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

Me parece que esta clase es muy importante, así que les dejo mi resumen, cualquier correción es bienvenida. 😅

Tipos de componentes en React: stateful vs. stateless

Clase 14/29

Este es un ejemplo para useState, podemos darle un valor inicial, el cual puede ser cambiado por un evento que se puede asignar a este mismo componente, o a otros componentes y hasta pasarlo por medio de un hijo para que éste cambie el inicial.

Para poder usar componentes stateful es necesario llamar useState desde React, la forma de importarlo y usarlo es la siguiente:

import React, { useState } from 'react';

const Button = () => {
    const [name, setName] = useState('Hola Mundo'); 
    return (
        <div>
            <h1>{name}</h1>
        </div>
    );
}

Los componentes stateless servirán para pasar un estilo visual o props, pero no tendrá otra función más que esa.

Este sería un componente sin estado, stateless.

import React from 'react';

const Button = ({ text }) => <ButtonRed text={text}/>;

También esta forma es válida:

import React from 'react';

const Button = () => (
        <div>
            <h1>Hola mundo!</h1>
        </div>
);

Es por eso que hay que tener presente que NO todos los componentes deben de tener estado y muchos de ellos sólo llevarán información que presentar directamente al HTML con CSS, pero sí serán parte de todo lo que se está construyendo.

Los componentes Stateful y Stateless, son los componentes más utilizados hoy en día.

También hay otro tipos de componentes, que están compuestos por clases.

Aquí, tendremos una clase, con el nombre que queramos, que extiende de React.Component

import React from 'react';

class App extends React.Component {
    render() {
        return (
            <div>
                <h1>Hello world! </h1>
            </div>
        )
    }
}

Aunque, si importamos React Component, desde un inicio, podemos simplemente escribirlo de esta forma:

import React , { Component } from 'react';

class App extends Component {
    render() {
        return (
            <div>
                <h1>Hello world! </h1>
            </div>
        )
    }
}

Este tipo de componentes trabajan con constructores, aunque ya no son tan usados, pues han sido reemplazados por la propuesta de React Hooks.

import React , { Component } from 'react';

class App extends Component {

    constructor() {
        super();
        this.sate = {
            count: 0
        };
    }

    render() {
        return (
            <div>
                <h1>Hello world! </h1>
            </div>
        )
    }
}

Es importante conocer este tipo de componentes porque si en algún momento tenemos que dar mantenimiento a alguna página que fue construida hace unos años atrás, es muy posible que nos encontremos este tipo de componentes.

Los hooks, tienen una funcionalidad particular, pues reciben un componente, extienden su funcionalidad con lo que esté dentro del componente y retornan un componente compuesto. Así podemos tener funcionalidades muy específicas con las que podemos trabajar según nuestras necesidades.

Esta sería la sintaxis:

import React , { Component } from 'react';

function ComponentWrapper(WrapperComponent) {
    class Wrapper extends Component {
        render () {
            return <WrapperComponent {...this.props} />;
        }
    }

    return Wrapper;
}

Más adelante aprenderemos más sobre React Context y cómo usarlo.

Aquí un recurso que me ayudo a entender de mejor manera la diferencia de los componentes

Aquí te comparto la idea de los componentes en palabras más sencillas
En react hay 4 tipos principales de componentes en React.

Props ⇒ propiedades que le pasamos al componente la cual reciben del componente padre en forma de prop. Hacen a los componentes re utilizables (Recibe datos)
State ⇒ El estado del componente del cual no puede ser accedido ni modificado por fuera de la aplicación. Es un equivalente a variables locales. (Administra datos)

Statefull

import React, { useState } from 'react';

const Button = () => {
    const [name, setName] = useState('Hola Mundo'); 
    return (
        <div>
            <h1>{name}</h1>
        </div>
    );
}

Los componentes statefull son comúnmente usados con state obviamente. ¿Por qué? ⇒ el modelo de react indica que solo puede cambiar si otro componente hijo cambia. Es decir, desde adentro puede cambiar y no por afuera. Imagina el modelo MVC en el cual un componente causa que otro cambie (de manera simplificada).

Modificar el estado ⇒ setState()
Cuando hay una modificación de estado, todos los otros componentes se actualizan

Stateless

import React from 'react';

const Button = () => (
        <div>
            <h1>Hola mundo!</h1>
        </div>
);
// o también
import React from 'react';

const Button = ({ text }) => <ButtonRed text={text}/>;

Estos son usados normalmente con props. ¿Por qué? ⇒ porque siempre van a mantener la misma información, y no va a cambiar sin importar lo que pase. Por ejemplo un botón que siempre nos lleve a un link externo. No interactúa con los otros componentes de React.

No todo debe llevar estado, aprendamos a usar componentes sin estado. Además afectan el rendimiento de la aplicación.
Los datos son inmutables en Stateless

Componentes clase

import React from 'react';

class App extends React.Component {
		constructor() {
        super();
        this.sate = {
            count: 0
        };
    }
// también pueden o no llevar estado
    render() {
        return (
            <div>
                <h1>Hello world! </h1>
            </div>
        )
    }
}

Son la manera anterior a los React Hooks en la cual usábamos los componentes de React

HOC (high order components)

Reciben un componente, y los adaptan de otra manera para usarlos con “modificaciones”. Es como el patrón decorator. Suelen regresar un componente que modifica la lógica del componente anterior

import React , { Component } from 'react';

		function ComponentWrapper(WrapperComponent) {
	    class Wrapper extends Component {
        render () {
            return <WrapperComponent {...this.props} />;
        }
    }

    return Wrapper;
}

También podemos importar los hooks de la siguiente forma:

import { useState } from ‘react’;

const Button = () => {
const [name, setName] = useState(‘Hola Mundo’);
return (
<div>
<h1>{name}</h1>
</div>
);
}

Stateful: logica y estado.

Stateless: presentacionales, solo retorna un template.

Los componentes de alto orden se utilizan especialmente en librerias como Redux, que sirve para centralizar el manejo de estado de los componentes (entre otras cosas)

Esa herramienta de Copilot se ve impresionante.
Ya estoy en la waitlist.