27-Hooks en React
Hooks en React
¿Qué son los Hooks?
Son funciones especiales que te permiten "enganchar" características de React (como estado y ciclo de vida) en componentes funcionales.
Los Hooks principales:
1. useState() - Para estado
javascript
const [valor, setValor] = useState(valorInicial);
2. useEffect() - Para efectos secundarios
javascript
useEffect(() => {
// Código que se ejecuta después del render
return () => {
// Cleanup (como componentWillUnmount)
};
}, [dependencias]); // Array de dependencias
3. useContext() - Para acceder al Context API
javascript
const valor = useContext(MiContexto);
4. useRef() - Para referencias mutables
javascript
const inputRef = useRef(null);
// inputRef.current contiene el elemento DOM
5. useReducer() - Para estado complejo
javascript
const [state, dispatch] = useReducer(reducer, initialState);
Reglas de los Hooks:
Solo llames Hooks en el nivel superior
No dentro de bucles, condiciones o funciones anidadas
Solo llames Hooks desde:
Componentes funcionales de React
Otros Hooks personalizados
Ejemplo completo:
javascript
import React, { useState, useEffect } from 'react';
function EjemploHook() {
const [contador, setContador] = useState(0);
const [nombre, setNombre] = useState('Juan');
useEffect(() => {
document.title = `Contador: ${contador}`;
return () => {
console.log('Componente desmontado');
};
}, [contador]); // Solo se ejecuta cuando contador cambia
return (
<div>
<h1>Hola {nombre}</h1>
<p>Contador: {contador}</p>
<button onClick={() => setContador(contador + 1)}>
Incrementar
</button>
</div>
);
}
React y el DOM Virtual
¿Qué es el DOM Virtual?
Es una representación en memoria del DOM real. React crea un árbol de objetos JavaScript que replica la estructura del DOM.
Flujo de trabajo:
text
1. Estado/Props cambian
↓
2. React crea NUEVO Virtual DOM
↓
3. Compara con Virtual DOM anterior (Diffing)
↓
4. Calcula cambios mínimos necesarios
↓
5. Aplica solo esos cambios al DOM real
Diffing Algorithm (Algoritmo de comparación)
React compara los árboles del Virtual DOM de manera eficiente:
Reglas de comparación:
Diferentes tipos de elementos:
jsx
// React destruye el árbol viejo y construye uno nuevo
<div> → <span> // Reconstruye todo
Mismo tipo de elemento:
jsx
// React actualiza solo los atributos cambiados
<div className="viejo" /> → <div className="nuevo" />
Listas con keys:
jsx
// Sin keys: React reordena todos los elementos
// Con keys: React mueve solo los elementos necesarios
<li key="1">Item 1</li>
<li key="2">Item 2</li>
Ejemplo práctico del Virtual DOM:
javascript
// Representación del Virtual DOM
const elementoVirtual = {
type: 'div',
props: {
className: 'container',
children: [
{
type: 'h1',
props: {
children: 'Hola Mundo'
}
},
{
type: 'p',
props: {
children: 'Contador: 5'
}
}
]
}
};
Reconciliación (Reconciliation)
Proceso donde React sincroniza el Virtual DOM con el DOM real:
javascript
// 1. Render inicial
const elemento = <h1>Hola</h1>;
ReactDOM.render(elemento, contenedor);
// 2. Actualización
const nuevoElemento = <h1>Hola Mundo</h1>;
// React compara y solo actualiza el texto
Batch Updates (Actualizaciones por lotes)
React agrupa múltiples actualizaciones de estado:
javascript
// Estas 3 actualizaciones se procesan en un solo re-render
setContador(1);
setNombre('Pedro');
setEdad(25);
Ventajas del Virtual DOM:
1. Rendimiento:
javascript
// DOM Real: Actualiza 1000 elementos individualmente
for (let i = 0; i < 1000; i++) {
elemento.textContent = nuevoValor; // 1000 operaciones DOM
}
// Virtual DOM: Una sola operación
// 1. Actualiza objeto JavaScript (rápido)
// 2. Aplica cambios mínimos al DOM real
2. Abstracción del navegador:
React maneja las diferencias entre navegadores por ti.
3. Declaratividad:
Tu describes QUÉ quieres renderizar, no CÓMO hacerlo.
Ejemplo completo de flujo:
javascript
function App() {
const [items, setItems] = useState(['A', 'B', 'C']);
const agregarItem = () => {
setItems([...items, 'D']); // 1. Estado cambia
// 2. React re-renderiza componente
// 3. Crea nuevo Virtual DOM
// 4. Compara con anterior
// 5. Solo agrega un <li> al DOM real
};
return (
<ul>
{items.map(item => (
<li key={item}>{item}</li>
))}
</ul>
);
}
Resumen: Hooks:
Permiten usar estado y características de React en componentes funcionales
Simplifican la reutilización de lógica
Hacen el código más limpio y mantenible
Virtual DOM:
Es una estrategia de optimización
Minimiza operaciones costosas en el DOM real
Permite renderizado eficiente de interfaces complejas
Hace que React sea rápido incluso con muchas actualizaciones
La combinación de Hooks + Virtual DOM es lo que hace a React tan poderoso: una API declarativa y simple para el desarrollador, con un motor de renderizado extremadamente eficiente detrás.
Comentarios
Publicar un comentario