React Hooks

Los React Hooks son una característica importante introducida en React 16.8 que permite que los componentes de función tengan algunas características de los componentes de clase, como la gestión de estado y el uso de métodos de ciclo de vida.

Con los Hooks, puedes escribir componentes React de forma más concisa y flexible.

1. ¿Qué son los React Hooks?

Los React Hooks son un mecanismo de mejora para componentes de función que te permite usar las características de React sin escribir componentes de clase. Los principales Hooks incluyenuseState, useEffect, useContext, useReducer, useCallback, useMemo, useRef, yuseImperativeHandleotros. Estos Hooks proporcionan una forma de acceder a las características de React, lo que te permite organizar y reutilizar mejor tu código.

2. Principales React Hooks

useState

useStateEl Hook permite usar estado local en componentes de función. Devuelve un valor de estado y una función para actualizar ese valor.

Ejemplo

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

useEffect

useEffectEl Hook permite ejecutar operaciones de efectos secundarios en componentes de función (como obtención de datos, gestión de suscripciones, manipulación del DOM, etc.). Se ejecuta después de cada renderizado.

Ejemplo

import React, { useState, useEffect } from 'react';

function Timer() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setSeconds(seconds => seconds + 1);
    }, 1000);

    return () => clearInterval(interval);
  }, []); // Un array vacío como segundo parámetro indica que solo se ejecuta al montar y desmontar el componente

  return <p>Timer: {seconds} seconds</p>;
}

Los siguientes son algunos de los principales React Hooks y sus usos:

useState - Se usa para añadir estado a componentes de función; puedes usarlo para realizar un seguimiento de datos que cambian con el tiempo.

const [state, setState] = useState(initialState);

useEffect- Se usa para realizar operaciones de efectos secundarios, como obtención de datos, suscripciones o cambios manuales en el DOM. Es similar a los métodos de ciclo de vida componentDidMount, componentDidUpdate y componentWillUnmount en componentes de clase.

useEffect(() => {
  // 执行副作用操作
  return () => {
    // 清理操作
  };
}, [dependencies]); // 依赖数组

useContext- Se usa para acceder a los datos que React Context transmite en el árbol de componentes, sin tener que pasar props a través de cada componente.

const value = useContext(MyContext);

useReducer- Se usa para lógica de estado más compleja. Recibe una función reducer y un estado inicial, y devuelve el estado actual y la función dispatch para despachar acciones.

const [state, dispatch] = useReducer(reducer, initialState);

useCallback- Se usa para devolver una versión memoizada de la función de callback, evitando renderizaciones innecesarias.

const memoizedCallback = useCallback(
  () => {
    // 回调函数体
  },
  [dependencies] // 依赖数组
);

useMemo- Se usa para memorizar resultados de cálculos, evitando recalcular en cada renderizado.

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

useRef- Se usa para crear referencias a elementos del DOM o valores, y puede mantener el estado entre renderizados.

const refContainer = useRef(initialValue);

useImperativeHandle- Se usa para exponer métodos de elementos del DOM cuando se utilizan refs.

useImperativeHandle(ref, () => ({
  // 暴露的方法
}));
useLayoutEffect - 与 useEffect 类似，但它在所有的 DOM 变更之后同步执行。这在需要读取 DOM 布局并同步触发重渲染时非常有用。

useLayoutEffect(() => {
  // 副作用操作
}, [dependencies]);

useDebugValue- Se usa para mostrar una etiqueta personalizada de hook en las herramientas de desarrollo de React.

useDebugValue(value);

3. Beneficios de usar React Hooks

  • Lógica de componentes más concisa: No es necesario escribir componentes de clase; puedes usar componentes de función y Hooks para gestionar el estado y el ciclo de vida.
  • Mayor reutilización de código: Los Hooks te permiten extraer lógica en funciones reutilizables, reduciendo el código repetido.
  • Mejor optimización del rendimiento: ConuseEffect, useCallback, useMemoy otros Hooks, puedes controlar con mayor precisión los efectos secundarios y el consumo de rendimiento.

4. Consideraciones

  • Solo usa Hooks en el nivel superior: No llames a los Hooks dentro de bucles, condiciones o funciones anidadas. Asegúrate de que los Hooks se llamen en el mismo orden en cada renderizado.
  • Usa el plugin de ESLint: React proporciona oficialmente el plugin eslint-plugin-react-hooks para ayudarte a comprobar si el uso de los Hooks es correcto.

5. Ejemplo

A continuación se muestra un ejemplo que utiliza varios React Hooks:

Ejemplo

import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  }, [count]); // Actualiza el título solo cuando count cambie

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

export default Example;

En el código anterior, usamos useState para gestionar el estado de count, useEffect para actualizar el título de la página y un botón simple para incrementar count.

Con los Hooks, puedes escribir código de componentes más conciso y reutilizable.

Los Hooks también facilitan las pruebas de la lógica de los componentes, porque puedes probar la lógica de cada hook por separado sin necesidad de envolverlo en un componente.

Además, los Hooks admiten la personalización; puedes escribir tus propios Hooks para encapsular lógica compleja y luego reutilizarlos en varios componentes.

Otras extensiones