Dominar useContext: una inmersión profunda en la API de contexto de React

Hoy discutiremos el uso del enlace useContext en React, que permite compartir datos de manera eficiente entre componentes y simplifica la comunicación de componentes.

El useContextgancho en React permite el intercambio eficiente de datos entre componentes sin la necesidad de perforar accesorios.
Simplifica la comunicación de los componentes al proporcionar una forma para que los componentes accedan al estado global sin tener que pasar accesorios a través de múltiples niveles de componentes.
Esto da como resultado una base de código más organizada y mantenible, así como un rendimiento mejorado al evitar renderizaciones innecesarias. Además, useContext se puede usar como una alternativa a otras bibliotecas de administración de estado como Redux.

Aquí hay un ejemplo de cómo usar el useContextgancho en un componente de React:

import React, { useContext } from 'react';

// Create the context
const MyContext = React.createContext();

// Provide a context value
function MyProvider({ children }) {
  const [value, setValue] = React.useState("Hello, World!");
  const providerValue = { value, setValue };
  return <MyContext.Provider value={providerValue}>{children}</MyContext.Provider>;
}

function MyComponent() {
  // Use the context
  const { value, setValue } = useContext(MyContext);

  return (
    <div>
        <p>{value}</p>
        <button onClick={() => setValue('Hello, React!')}>Change Value</button>
    </div>
  );
}

function App() {
  return (
    <MyProvider>
      <MyComponent />
    </MyProvider>
  );
}

El MyProvidercomponente es un componente que proporciona un valor al contexto. Utiliza el useStategancho para establecer un valor inicial para el contexto. Luego, el MyProvidercomponente representa un MyContext.Providerelemento, que envuelve a sus elementos secundarios y proporciona el valor al contexto. Los valuey setValuese pasan como un único objeto al proveedor.

El MyComponentcomponente es un componente que consume el valor del contexto usando el useContextgancho. El useContextgancho se llama con el objeto de contexto que creamos anteriormente y devuelve el valor actual del contexto. En este ejemplo, el valor del contexto es una cadena, pero podría ser cualquier tipo de dato.

Luego, el MyComponentcomponente representa un elemento div con un elemento de párrafo que muestra el valor del contexto y un elemento de botón, cuando se hace clic en el botón, llama a la función setValue, que cambiará el valor del contexto y volverá a representar el componente a mostrar el valor actualizado.

Finalmente, el Appcomponente es el componente de nivel superior que representa el MyProvidercomponente y el MyComponentcomponente. Este componente es responsable de proporcionar el valor de contexto al MyProvidercomponente y representarlo MyComponent.

Cuando se representa el componente de la aplicación, representa el componente MyProvider, que establece el valor para el contexto, y el componente MyComponent, que recupera el valor del contexto mediante el useContextgancho.

Con este ejemplo, puede ver cómo el useContextgancho le permite compartir fácilmente valores entre componentes sin tener que pasar los valores a través de múltiples niveles del árbol de componentes.

Espero que les guste

¡Feliz codificación!

Quiero dar sugerencias: -

encuéntrame en LinkedIn Twitter

Envíame un correo electrónico a [email protected]