Dominar los design patterns de React

Introducción

Los design patterns son soluciones probadas a problemas recurrentes de diseño de software. En el contexto de React, los design patterns proporcionan modelos de diseño y enfoques para estructurar tus componentes, gestionar el estado, gestionar las interacciones del usuario y mucho más. En los diversos ejemplos del libro, hemos visto algunos de ellos, a veces sin nombrarlos. Esta sección te dará una mejor comprensión de cómo funcionan.

Lo que puede esperar de este capítulo

Este capítulo se centrará en el uso de patterns y sus ventajas y limitaciones. Es importante tener en cuenta que no existe un design pattern a seguir a la hora de codificar una aplicación React. Esto puede ser un abuso del lenguaje, pero mencionamos aquí varias técnicas que, o bien se mencionan en la documentación como buenas prácticas, o bien se han popularizado dentro de la comunidad.

React y la comunidad de desarrolladores están en constante evolución del ecosistema. A veces las cosas se mueven tan rápido que ciertos patterns ya no son ampliamente utilizados, pero sigue siendo importante entenderlos en caso de que los encuentre. Entre otras cosas, cubriremos:

Los Higher-Order Components (HOC), un enfoque que permite reutilizar la lógica entre distintos componentes;
Los render props, un modelo en el que un componente propaga una función de renderizado...

Higher-Order Components

Los Higher-Order Components (HOC) son un design pattern en React que permite reutilizar cierta lógica. Los HOC no están pensados para utilizarse por sí solos; son funciones que toman un componente como argumento y devuelven un nuevo componente con funcionalidad mejorada.

1. Funcionamiento de los Higher-Order Components

He aquí un ejemplo de la estructura básica de una HOC:

function withFeature(WrappedComponent) {  
  return function EnhancedComponent(props) {  
    // Añadir lógica o propiedades aquí  
    return <WrappedComponent {...props} />;  
  };  
}

En este ejemplo, withFeature es un HOC que envuelve WrappedComponent y devuelve EnhancedComponent, un componente mejorado con nuevas capacidades.

Existe una convención para las HOC, que suelen empezar por la palabra with. La idea de una HOC es tomar un componente y devolverlo, con algo extra.

2. Qué ofrecen los Higher-Order Components

Los HOC tienen dos puntos fuertes:

Permiten compartir funcionalidades comunes entre varios componentes, reduciendo así la redundancia de código.
Pueden utilizarse para dividir una aplicación en componentes independientes, cada uno de los cuales gestiona sus propios estados y lógica. De este modo, podemos respetar el concepto de separation...

Renderizar props

El design pattern Render Props es una técnica que consiste en pasar una función como prop a un componente, permitiendo al componente obtener datos o comportamiento de esta función. Este pattern promueve la reutilización al permitir que los componentes compartan la lógica sin tener que utilizar los Higher-Order Components.

1. Cómo funcionan los render props

El principio detrás de los render props es simple: un componente recibe una función como prop, normalmente llamada render u otra función específica. Esta función se llama entonces en el componente, permitiendo al componente padre controlar lo que se va a renderizar.

He aquí un ejemplo básico de cómo utilizar los render props :

function DataProvider({ render }) {  
  const [data, setData] = React.useState(null);  
  
  // Lógica para cargar datos  
  const loadData = () => {  
    setData('Données chargées');  
  };  
  
  // Llama a loadData según la lógica de negocio...  
  
  return render(data);  
}  
}

En este ejemplo, DataProvider es un componente funcional que utiliza un render prop render. El componente gestiona un estado de datos...

Provider

El design pattern Provider es un enfoque para gestionar y compartir el estado entre diferentes componentes sin tener que pasar datos manualmente a través de props.

Esta técnica permite pasar datos o funciones a través de la arborescencia de componentes sin tener que pasarlos explícitamente a cada nivel mediante props. Este modelo utiliza el contexto de React para proporcionar un valor (datos o funciones) a componentes situados más abajo en la arborescencia de componentes.

1. Funcionamiento del Provider Pattern

El Provider Pattern se basa en la noción de «proveedor» de datos. Un componente Provider se coloca en la parte superior de la arborescencia de componentes, generalmente cerca de la raíz de la aplicación. Este componente proporciona un contexto que puede ser consumido por los componentes hijos sin tener que transmitirlo a través de los props.

const MyContext = React.createContext(defaultValue);  
  
function MyProvider({ children, value }) {  
  return <MyContext.Provider value={value}>{children}</MyContext.Provider>;  
}

En este ejemplo, MyProvider es un componente que utiliza MyContext.Provider para pasar value a sus hijos y a todos los descendientes interesados.

2. Ventajas del Provider Pattern

El Provider Pattern permite compartir datos o funciones de forma eficiente a través...

Componentes container y de presentación

Los componentes containers, también conocidos como «componentes inteligentes» o smart components, se centran en cómo funcionan las cosas. Proporcionan datos y comportamiento a los componentes de presentación o a otros componentes hijos.

Los componentes de presentación, también conocidos como «componentes tontos» o dumb components, se centran en el aspecto visual de la interfaz de usuario. Reciben datos y callbacks principalmente a través de props y los renderizan de forma declarativa.

1. Componentes container

Los componentes container son responsables de la lógica y la gestión del estado. A menudo están conectados a fuentes de datos externas, como stores Redux o APIs. Se encargan de las operaciones de recuperación, manipulación y actualización del estado de los datos. A continuación, pasan los datos necesarios a los componentes de presentación a través de las props.

He aquí un ejemplo:

function UserListContainer() {  
  const [users, setUsers] = useState([]);  
  
  React.useEffect(() => {  
    // Lógica para cargar los datos de usuario 
  }, []);  
  
  return <UserList users={users} />;  
}

UserListContainer...

Hooks

Los hooks son una importante innovación introducida en React para permitir que los componentes funcionales gestionen el estado local, los efectos y otras funcionalidades antes reservadas a los componentes de clase. Los hooks ofrecen una forma más elegante y concisa de escribir código React al evitar la complejidad de las jerarquías de componentes anidados y promover la reutilización lógica.

1. Conceptos básicos del pattern Hooks

El pattern Hooks en React se refiere al uso de funciones especiales, llamadas hooks, para reutilizar la lógica de estado entre varios componentes de una aplicación. Este enfoque es especialmente útil para añadir estado a un componente funcional, gestionar la lógica de estado entre varios componentes y gestionar el ciclo de vida de un componente.

2. Hooks personalisados

Además de los hooks incorporados, React permite crear hooks personalizados. Estos pueden encapsular y compartir la lógica de estado o comportamientos específicos, lo que facilita su reutilización en varios componentes de la aplicación.

He aquí un ejemplo:

function useHover() {  
  const [hovered, setHovered] = React.useState(false);  
  
  const onMouseEnter = () => setHovered(true);  
  const onMouseLeave = () => setHovered(false);  
  
  return {...