¿Qué es la perforación puntal y cómo evitarla?

¿Qué son los accesorios?

A los componentes en React se les pueden pasar algunos parámetros. Estos parámetros generalmente se denominan props. No existe una regla estricta de que deban mencionarse como accesorios, pero es conveniente usar la misma convención.

¿Qué es la perforación de apoyo?

Cualquiera que haya trabajado en React se habría enfrentado a esto y, si no, lo afrontará definitivamente. La perforación de apoyo es básicamente una situación en la que se envían los mismos datos en casi todos los niveles debido a los requisitos en el nivel final. Aquí hay un diagrama para demostrarlo mejor. Los datos debían enviarse de padre a hijoC. En este artículo se discuten diferentes formas de hacerlo.

Creando la aplicación React:

• Paso 1: Cree una aplicación React usando el siguiente comando:

  npx create-react-app useContextReact 

• Paso 2: después de crear la carpeta de su proyecto, es decir , useContextReact, muévase a ella con el siguiente comando:

  cd useContextReact

Estructura del proyecto: Tendrá el siguiente aspecto.

Ejemplo 1: con el uso de Prop Drilling

import React, { useState } from "react";
  
function Parent() {
  const [fName, setfName] = useState("firstName");
  const [lName, setlName] = useState("LastName");
  return (
    <>
      <div>This is a Parent component</div>
      <br />
      <ChildA fName={fName} lName={lName} />
    </>
  );
}
  
function ChildA({ fName, lName }) {
  return (
    <>
      This is ChildA Component.
      <br />
      <ChildB fName={fName} lName={lName} />
    </>
  );
}
  
function ChildB({ fName, lName }) {
  return (
    <>
      This is ChildB Component.
      <br />
      <ChildC fName={fName} lName={lName} />
    </>
  );
}
  
function ChildC({ fName, lName }) {
  return (
    <>
      This is ChildC component.
      <br />
      <h3> Data from Parent component is as follows:</h3>
      <h4>{fName}</h4>
      <h4>{lName}</h4>
    </>
  );
}
  
export default Parent;

import "./styles.css";
import Parent from "./without_useContext";
  
export default function App() {
  return (
    <div className="App">
      <Parent />
    </div>
  );
}

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida:

Demostración de los datos inicializados en el padre, necesarios en el último componente (hijo C) deben transmitirse a cada nivel conocido como perforación de apoyo.

Ejemplo 2: Sin perforación de apoyo

El problema con Prop Drilling es que cada vez que se necesiten datos del componente principal, tendrían que provenir de cada nivel, independientemente del hecho de que no se necesitan allí y simplemente se necesitan en último lugar.

Una mejor alternativa a esto es usar el gancho useContext . El enlace useContext se basa en la API de contexto y funciona en el mecanismo de proveedor y consumidor. El proveedor debe envolver los componentes dentro de los componentes del proveedor en los que se deben consumir los datos. Luego, en esos componentes, usando el enlace useContext , se deben consumir los datos.

import React, { useState, useContext } from "react";
  
let context = React.createContext(null);
function Parent() {
  const [fName, setfName] = useState("firstName");
  const [lName, setlName] = useState("LastName");
  return (
    <context.Provider value={{ fName, lName }}>
      <div>This is a Parent component</div>
      <br />
      <ChildA />
    </context.Provider>
  );
}
  
function ChildA() {
  return (
    <>
      This is ChildA Component.
      <br />
      <ChildB />
    </>
  );
}
  
function ChildB() {
  return (
    <>
      This is ChildB Component.
      <br />
      <ChildC />
    </>
  );
}
  
function ChildC() {
  const { fName, lName } = useContext(context);
  return (
    <>
      This is ChildC component.
      <br />
      <h3> Data from Parent component is as follows:</h3>
      <h4>{fName}</h4>
      <h4>{lName}</h4>
    </>
  );
}
  
export default Parent;

import "./styles.css";
import Parent from "./with_useContext";
  
export default function App() {
  return (
    <div className="App">
      <Parent />
    </div>
  );
}

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida:
 

El mismo resultado, pero esta vez, en lugar de pasar datos a través de cada nivel, se consume directamente en el componente requerido mediante useContext Hook.