什么是支柱钻孔以及如何避免？

什么是道具？

React 中的组件可以传递一些参数。这些参数通常被命名为 props。没有硬性规定它们应该作为道具被提及，但使用相同的约定很方便。

什么是支柱钻井？

任何在 React 中工作过的人都会面临这个问题，如果没有，那么肯定会面临这个问题。支柱钻探基本上是由于最终级别的要求，几乎每个级别都发送相同的数据的情况。这是一个图表，可以更好地演示它。数据需要从Parent发送到ChildC。在本文中讨论了不同的方法来做到这一点。

创建反应应用程序：

• 第 1 步：使用以下命令创建一个 React 应用程序：

  npx create-react-app useContextReact 

• 第 2 步：创建项目文件夹后，即useContextReact， 使用以下命令移动到它：

  cd useContextReact

项目结构：它将如下所示。

示例 1：使用 Prop Drilling

without_useContext.js

import React, { useState } from "react";
  
function Parent() {
  const [fName, setfName] = useState("firstName");
  const [lName, setlName] = useState("LastName");
  return (
    <>
      
This is a Parent component
      

      
    
  );
}
  
function ChildA({ fName, lName }) {
  return (
    <>
      This is ChildA Component.
      

      
    
  );
}
  
function ChildB({ fName, lName }) {
  return (
    <>
      This is ChildB Component.
      

      
    
  );
}
  
function ChildC({ fName, lName }) {
  return (
    <>
      This is ChildC component.
      

      
 Data from Parent component is as follows:
      
{fName}
      
{lName}
    
  );
}
  
export default Parent;

应用程序.js

import "./styles.css";
import Parent from "./without_useContext";
  
export default function App() {
  return (
    

      
    
  );
}

运行应用程序的步骤：从项目的根目录使用以下命令运行应用程序：

npm start

输出：现在打开浏览器并转到http://localhost:3000/ ，您将看到以下输出：

演示在父级中初始化的数据，最后一个组件（子级 C）中需要的数据必须向下传递每个级别，称为 Prop Drilling。

示例 2：没有支柱钻孔

Prop Drilling 的问题在于，无论何时需要来自 Parent 组件的数据，它都必须来自每个级别，不管它在那里不需要并且只是在最后需要它。

一个更好的选择是使用useContext钩子。 useContext钩子是基于 Context API 的，工作在 Provider 和 Consumer 的机制上。 Provider 需要将组件包装在 Provider Components 中，在这些组件中必须使用数据。然后在这些组件中，使用需要使用数据的useContext挂钩。

with_useContext.js

import React, { useState, useContext } from "react";
  
let context = React.createContext(null);
function Parent() {
  const [fName, setfName] = useState("firstName");
  const [lName, setlName] = useState("LastName");
  return (
    
      
This is a Parent component
      

      
    
  );
}
  
function ChildA() {
  return (
    <>
      This is ChildA Component.
      

      
    
  );
}
  
function ChildB() {
  return (
    <>
      This is ChildB Component.
      

      
    
  );
}
  
function ChildC() {
  const { fName, lName } = useContext(context);
  return (
    <>
      This is ChildC component.
      

      
 Data from Parent component is as follows:
      
{fName}
      
{lName}
    
  );
}
  
export default Parent;

应用程序.js

import "./styles.css";
import Parent from "./with_useContext";
  
export default function App() {
  return (
    

      
    
  );
}

运行应用程序的步骤：从项目的根目录使用以下命令运行应用程序：

npm start

输出：现在打开浏览器并转到http://localhost:3000/ ，您将看到以下输出：

相同的输出，但这次不是通过每个级别传递数据，而是直接在使用 useContext Hook 所需的组件中消费。