TIPOS DE COMPONENTES

 En React, existen varias formas de crear componentes, cada una con sus propias características y casos de uso. Aquí te muestro las principales formas:

---

1. Componentes de Clase (Class Components)

• Heredan de React.Component o React.PureComponent.

• Tienen ciclo de vida y estado (state).

• Usados en versiones antiguas de React (hoy en día se prefieren los Hooks).

jsx

import React from 'react';

class MiComponente extends React.Component {
  constructor(props) {
    super(props);
    this.state = { contador: 0 };
  }

  render() {
    return <div>Contador: {this.state.contador}</div>;
  }
}

---

2. Componentes Funcionales (Functional Components)

• Son funciones JavaScript/JSX que retornan elementos React.

• Antes de React 16.8, eran solo para componentes sin estado (presentacionales).

• Hoy son la forma recomendada gracias a los Hooks.

jsx

function MiComponente(props) {
  return <div>Hola, {props.nombre}</div>;
}

O con arrow function:

jsx

const MiComponente = (props) => <div>Hola, {props.nombre}</div>;

---

3. Componentes con Hooks

• Los Hooks (como useState, useEffect) permiten manejar estado y ciclo de vida en componentes funcionales.

• Es la forma moderna y más limpia de trabajar en React.

jsx

import React, { useState } from 'react';

const Contador = () => {
  const [contador, setContador] = useState(0);

  return (
    <button onClick={() => setContador(contador + 1)}>
      Clics: {contador}
    </button>
  );
};

---

4. Componentes de Orden Superior (HOC - Higher-Order Components)

• Son funciones que reciben un componente y retornan uno nuevo con funcionalidades adicionales.

• Útiles para reutilizar lógica (ej: autenticación, estilos).

jsx

function conEstilos(Componente) {
  return (props) => <Componente {...props} style={{ color: 'red' }} />;
}

const MiTextoConEstilo = conEstilos(({ style }) => <p style={style}>Hola</p>);

---

5. Componentes Controlados vs. No Controlados

• Controlados: El valor lo maneja React (ej: inputs vinculados a estado).

  jsx

  const InputControlado = () => {
    const [valor, setValor] = useState('');
    return <input value={valor} onChange={(e) => setValor(e.target.value)} />;
  };

• No controlados: El valor lo maneja el DOM (ej: con useRef).

  jsx

  const InputNoControlado = () => {
    const inputRef = useRef();
    return <input ref={inputRef} defaultValue="Valor inicial" />;
  };

---

6. Componentes con Contexto (Context API)

• Acceden a datos globales sin pasar props manualmente.

• Se usa createContext + useContext.

jsx

const MiContexto = React.createContext();

const Proveedor = ({ children }) => {
  const [valor, setValor] = useState('default');
  return (
    <MiContexto.Provider value={{ valor, setValor }}>
      {children}
    </MiContexto.Provider>
  );
};

const Consumidor = () => {
  const { valor } = useContext(MiContexto);
  return <div>{valor}</div>;
};

---

7. Componentes de Renderizado Condicional

• Retornan diferentes JSX según condiciones.

jsx

const Saludo = ({ estaLogeado }) => {
  return estaLogeado ? <p>Bienvenido</p> : <p>Inicia sesión</p>;
};

---

8. Componentes Dinámicos (con lazy + Suspense)

• Para code-splitting (carga bajo demanda).

jsx

const LazyComponent = React.lazy(() => import('./MiComponente'));

const App = () => (
  <React.Suspense fallback={<div>Cargando...</div>}>
    <LazyComponent />
  </React.Suspense>
);