Manual de referencia de React

El manual de React incluye varias API principales, Hooks, métodos del ciclo de vida de los componentes, etc.

A continuación se presenta un manual de referencia completo de React, que cubre todos los conceptos fundamentales desde básico hasta avanzado (basado en prácticas modernas de React 18+, priorizando componentes de función + Hooks). Cada tabla incluyeConcepto/Sintaxis、Descripción、Código de ejemployNotas。

1. Fundamentos de JSX

Concepto/Sintaxis Descripción Código de ejemplo Notas
Estructura básica de JSX Sintaxis similar a HTML, compilada aReact.createElement return <div>Hello</div>; Debe tener un único elemento raíz, se puede usar<></>Fragmento
Inserción de expresiones usar{}Incrusta expresiones JS (solo expresiones, no sentencias) <h1>{name.toUpperCase()}</h1> Admite cálculos, variables, ternarios, etc.
Vinculación de atributos class → className，for → htmlFor <div className="box" htmlFor="id"> Nomenclatura en camelCase (por ejemplo,tabIndex）
Etiquetas autocerrables Todas las etiquetas deben estar cerradas <img src="....html" alt="..." /> Las etiquetas sin hijos deben autocerrarse
Renderizado condicional Operador ternario o&& {isLogin ? <User /> : <Login />}<br>{count > 0 && <span>{count}</span>} &&Se usa para "renderizar si existe"
Renderizado de listas usarmap()debe agregarsekey {items.map(item => <li key={item.id}>{item.name}</li>)} key debe ser única y estable, evita usar index
Comentarios usar{/* */} {/* Esto es un comentario */} Colocados dentro de JSX
Fragmento (Fragment) Etiqueta vacía, evita DOM adicional <><p>1</p><p>2</p></>o<React.Fragment> Sintaxis corta<></>Más utilizada

2. Fundamentos de componentes

Concepto/Sintaxis Descripción Código de ejemplo Notas
Componente de función (recomendado) Primera letra en mayúscula, retorna JSX function App() { return <div>Hello</div>; } Opción preferida moderna, sin this
Componente de clase (legado) UsaclassHerenciaReact.Component class App extends React.Component { render() { return <div/>; } } Solo para entender código antiguo
Paso de Props Flujo de datos unidireccional, de padre a hijo <Child name="QiXin" age={25} /><br>Subcomponente:function Child({name}) {...} Solo lectura, no se pueden modificar
Props por defecto defaultProps(Los componentes de función usan parámetros por defecto) function Child({name = 'Guest'}) {...} Los parámetros por defecto de ES6 son más concisos
Verificación de tipos de Props PropTypes (o TypeScript) Child.propTypes = { name: PropTypes.string.isRequired } Advertencia en modo desarrollo, eliminado en producción
Composición de componentes Anidación, children <Card><h1>Title</h1></Card><br>Padre:{props.children} children es un Prop especial

3. Estado y Hooks (núcleo)

Hook / Concepto Descripción Código de ejemplo Notas
useState Declarar variable de estado const [count, setCount] = useState(0);<br><button onClick={() => setCount(c => c+1)}> la función set con actualización funcional evita estado obsoleto
useEffect Efectos secundarios (montaje, actualización, limpieza) useEffect(() => { ... }, [dep]);<br>Retorna la función de limpieza Matriz vacía [] se monta una sola vez
useRef Guardar valores mutables o referencias al DOM const inputRef = useRef(null);<br>inputRef.current.focus(); No desencadena un re-renderizado
useContext Consume Context, evita el Prop Drilling const theme = useContext(ThemeContext); En combinación con Context.Provider
useReducer Lógica de estado compleja (similar a Redux) const [state, dispatch] = useReducer(reducer, initial); Para múltiples estados relacionados
useMemo Cachear resultados de cálculo const memoValue = useMemo(() => compute(), [dep]); Evita la repetición de cálculos costosos
useCallback Cachear referencias de funciones const handle = useCallback(() => {...}, [dep]); Optimiza los Props de subcomponentes
Hook personalizado Encapsular lógica reutilizable function useFetch(url) { ... return data; } Comienza con "use"

4. Ciclo de vida (componentes de clase vs. Hooks)

Fase Métodos del componente de clase Equivalente en Hooks Notas
Montaje (Mount) constructor → render → componentDidMount useEffect(() => {…}, []) Inicializar estado / llamadas de API
Actualización (Update) shouldComponentUpdate → render → componentDidUpdate useEffect(() => {…}, [dep]) + memo Se activa con cambios en las dependencias
Desmontaje (Unmount) componentWillUnmount useEffect retorna la función de limpieza Limpiar temporizadores/suscripciones
Manejo de errores componentDidCatch Componente ErrorBoundary Hooks no tiene un equivalente directo

5. Contexto y estado global

Concepto Descripción Código de ejemplo Notas
Context API Compartir datos globalmente const ThemeContext = createContext();<br><Provider value="dark"> Evitar el uso excesivo, costo de rendimiento
useContext Consumir en componentes de función const theme = useContext(ThemeContext); Alternativa concisa al Consumer

6. Características avanzadas (React 18+)

Concepto Descripción Código de ejemplo Notas
Concurrent Mode Renderizado interrumpible, mejora la capacidad de respuesta <React.StrictMode> + Transitions Actualización automática por lotes
Suspense Carga diferida / espera de obtención de datos <Suspense fallback={<Loading/>}><LazyComp /></Suspense> En combinación con lazy
React.lazy División de código y carga diferida const Lazy = React.lazy(() => import('./Comp')); Debe estar envuelto con Suspense
startTransition Marcar actualizaciones no urgentes startTransition(() => setQuery(e.target.value)); Mantener la UI receptiva
useDeferredValue Retrasar valores no urgentes const deferred = useDeferredValue(query); Similar al debounce de entrada

7. Optimización del rendimiento

Técnica Descripción Código de ejemplo Notas
React.memo Comparación superficial de Props, evita renderizados innecesarios export default React.memo(Component); Exclusivo para componentes de función
useMemo / useCallback Cachear valores/funciones Como arriba Evitar el re-renderizado de subcomponentes
Optimización de key key única y estable Por ejemplo, en el renderizado de listas Evitar usar index
Lista virtual Optimización de listas largas (react-window) <FixedSizeList height={500} itemCount={1000} /> Bibliotecas de terceros

8. Herramientas comunes del ecosistema

Herramienta Uso Instalación/Uso Notas
React Router v6 Enrutamiento y navegación npm i react-router-dom<br><BrowserRouter><Routes><Route path="/" element={<Home/>}/></Routes></BrowserRouter> Rutas anidadas, Outlet
Redux Toolkit Gestión de estado global npm i @reduxjs/toolkit react-redux Obtención de datos con RTK Query
React Hook Form Manejo de formularios useForm() Alto rendimiento, validación sencilla
Axios / Fetch Solicitudes de datos fetch('/api') Se usa en useEffect
Tailwind / MUI Estilos de UI npm i tailwindcssomui Embellecer rápidamente

9. Depuración y mejores prácticas

Tema Descripción Herramientas/Métodos
Herramienta de depuración Ver árbol de componentes, Props, Hooks React DevTools (extensión de navegador)
Strict Mode Detectar problemas potenciales <React.StrictMode>
ESLint + Prettier Estándares de código Extensión de VS Code
Pruebas Jest + React Testing Library npm i --save-dev jest

A continuación se presentan algunas funciones y métodos comunes, junto con una breve descripción de ellos:

API principal de React

createElement(type, [props], [...children])- Crea un elemento o componente de React.

Ejemplo

import React from 'react';

const element = React.createElement('div', { className: 'container' }, 'Hello, World!');
// React.createElement devuelve un elemento de React

cloneElement(element, [props], [...children])- Clona y devuelve un elemento de React, pudiendo pasar nuevas props y elementos hijos.

Ejemplo

import React, { cloneElement } from 'react';

const parentElement = <div>Hello</div>;
const clonedElement = cloneElement(parentElement, { className: 'child' });
// clonedElement es un elemento de React clonado, con un nuevo className

createFactory(type)- Crea una función de fábrica para crear elementos de React de un tipo específico.

Ejemplo

import React from 'react';

const factory = React.createFactory('button');
const buttonElement = factory({ onClick: () => console.log('Button clicked') }, 'Click me');
// buttonElement es un elemento de React creado por fábrica, un botón clicable

isValidElement(element)- Determina si un objeto es un elemento válido de React.

Ejemplo

import React, { isValidElement } from 'react';

const element = <div>Hello</div>;
console.log(isValidElement(element)); // true

Children.map(children, function[(thisArg)])- Itera y mapea los elementos hijos de React.

Ejemplo

import React, { Children } from 'react';

const parentElement = (
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
);

const mappedChildren = Children.map(parentElement.props.children, child => (
  <li>{child}</li>
));
// mappedChildren es la lista de elementos hijos mapeados

Métodos del ciclo de vida de los componentes de React

constructor(props)- El constructor, llamado al crear el componente, se utiliza para inicializar el estado y enlazar métodos.

Ejemplo

import React, { Component } from 'react';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  render() {
    return <div>{this.state.count}</div>;
  }
}

componentDidMount()- Se llama después de que el componente se monta, generalmente para operaciones de efectos secundarios como obtención de datos, suscripciones, etc.

Ejemplo

import React, { Component } from 'react';

class MyComponent extends Component {
  componentDidMount() {
    // Se suscribe a los datos después de que el componente se monte
    this.subscription = subscribeToData(data => {
      this.setState({ data });
    });
  }

  componentWillUnmount() {
    // Se cancela la suscripción antes de que el componente se desmonte
    this.subscription.unsubscribe();
  }

  render() {
    return <div>{this.state.data}</div>;
  }
}

componentDidUpdate(prevProps, prevState)- Se llama después de que el componente se actualiza, generalmente para responder a cambios en props o estado.

Ejemplo

import React, { Component } from 'react';

class MyComponent extends Component {
  componentDidUpdate(prevProps, prevState) {
    // Se actualizan los datos cuando cambian las props o el estado
    if (this.props.userID !== prevProps.userID) {
      this.fetchData(this.props.userID);
    }
  }

  render() {
    return <div>{this.props.userID}</div>;
  }
}

componentWillUnmount()- Se llama antes de que el componente se desmonte, para liberar recursos como limpiar temporizadores, cancelar suscripciones, etc.

Ejemplo

import React, { Component } from 'react';

class MyComponent extends Component {
  componentWillUnmount() {
    // Se limpian los recursos antes de que el componente se desmonte
    clearInterval(this.timerID);
  }

  render() {
    return <div>{this.state.time}</div>;
  }
}

static getDerivedStateFromProps(props, state)- Se utiliza para reemplazar componentWillReceiveProps, actualizando el estado cuando cambian las props.

Ejemplo

import React, { Component } from 'react';

class MyComponent extends Component {
  static getDerivedStateFromProps(nextProps, prevState) {
    if (nextProps.userID !== prevState.userID) {
      return { userID: nextProps.userID };
    }
    return null;
  }

  render() {
    return <div>{this.state.userID}</div>;
  }
}

React Hooks

useState(initialState)- Declara una variable de estado y su función de actualización.

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(callback, [dependencies])- Declara una operación de efecto secundario, similar a la combinación de componentDidMount y componentDidUpdate.

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 se ejecuta solo al montar y desmontar el componente

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

useContext(context)- Obtiene y se suscribe a un contexto de React.

Ejemplo

import React, { useContext } from 'react';

const MyContext = React.createContext('default');

function MyComponent() {
  const contextValue = useContext(MyContext);
  return <p>Context value: {contextValue}</p>;
}

useReducer(reducer, initialState)- Declara una función reducer y dispatch para lógica de estado compleja.

Ejemplo

import React, { useReducer } from 'react';

const initialState = { count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}

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

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
    </div>
  );
}

useCallback(callback, [dependencies])- Almacena en caché una función de callback para evitar recrearla cuando cambian las dependencias.

Ejemplo

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

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

  const increment = useCallback(() => {
    setCount(count + 1);
  }, [count]);

  return (
    <div>
      <ChildComponent onClick={increment} />
    </div>
  );
}

function ChildComponent({ onClick }) {
  return <button onClick={onClick}>Increment Count</button>;
}

useMemo(factory, [dependencies])- Almacena en caché un valor calculado para evitar recalcularlo cuando cambian las dependencias.

Ejemplo

import React, { useMemo } from 'react';

function ExpensiveComponent({ data }) {
  const expensiveValue = useMemo(() => {
    return computeExpensiveValue(data);
  }, [data]);

  return <div>Expensive value: {expensiveValue}</div>;
}

useRef(initialValue)- Crea una referencia persistente, que puede usarse para acceder a elementos DOM o almacenar en caché cualquier valor mutable.

Ejemplo

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

function TextInputWithFocusButton() {
  const inputRef = useRef(null);

  useEffect(() => {
    inputRef.current.focus();
  }, []);

  return (
    <>
      <input ref={inputRef} type="text" />
      <button onClick={() => inputRef.current.focus()}>Focus Input</button>
    </>
  );
}

Otras funciones comunes

ReactDOM.render(element, container[, callback])- Renderiza elementos de React en un nodo DOM específico.

Ejemplo

import React from 'react';
import ReactDOM from 'react-dom';

const element = <h1>Hello, World!</h1>;
ReactDOM.render(element, document.getElementById('root'));

ReactDOM.createRoot(container[, options])- Crea una instancia raíz de React, compatible con las características de renderizado concurrente.

Ejemplo

import ReactDOM from 'react-dom';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

ReactDOM.unmountComponentAtNode(container)- Desmonta el componente de React en el nodo DOM especificado.

Ejemplo

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.unmountComponentAtNode(document.getElementById('root'));

ReactDOMServer.renderToString(element)- Renderiza elementos de React como una cadena HTML estática, utilizada para el renderizado del lado del servidor.

Ejemplo

import React from 'react';
import ReactDOMServer from 'react-dom/server';

const element = <div>Hello, World!</div>;
const htmlString = ReactDOMServer.renderToString(element);
Otras extensiones