后端开发教程 - Java、Spring Boot 实战 - msg200.com
什么是 React Prop Drilling 和 Context API
介绍
这就是React Prop Drilling 的工作原理。
结论
与我联系
在开始这篇博客之前，我假设你们都应该具备 React 的基础知识。
在这篇博客中，我们将学习 React 最精彩的概念之一——Prop Drilling 和 Context API。
介绍
Prop 钻孔是一种方法，我们借助它们之间的所有组件将 props 传递给另一个组件。
让我们通过一个现实生活中的例子来理解。
想象一下，你在学校，坐在最后一张长凳上，你最好的朋友坐在第一张长凳上。突然，你最好的朋友需要一支笔，而你正好有一支多余的笔，你想把这支笔给你最好的朋友。为此，请坐在你旁边长凳上的朋友拿走笔并将其转发给下一个，并重复此操作，直到笔到达你朋友手中。 在这里，你可以看到他如何借助另一张长凳将笔交给他最好的朋友。 在React中，如果我们想要将 props 传递给任何其他组件，那么我们必须将 props 传递给它们之间的所有组件，整个过程称为React Prop Drilling。
现在就借助代码来理解这一切吧。
import React, { useState } from "react";
//FIRST COMPONENT
const LastBench = () => {
const [penName, setPenName] = useState("Blue Gel Pen");
return (
<>
<h1>Hello I am Last Bench</h1>
</>
);
};
//SECOND COMPONENT
const NextBench = () => {
return (
<>
<h1>Hello I am Next Bench.</h1>
</>
);
};
//THIRD COMPONENT
const FirstBench = () => {
return (
<>
<h1>Hey I am First Bench</h1>
</>
);
};
export default LastBench;
在上面的代码中，我们创建了 3 个组件。在第一个组件中，我们借助 useState hook 声明了一个笔名。现在，我们需要借助第二个组件将笔名传递给最后一个组件。
import React, { useState } from "react";
//FIRST COMPONENT
const LastBench = () => {
const [penName, setPenName] = useState("Blue Gel Pen");
return (
<>
<h1>Hello I am Last Bench</h1>
<br />
<NextBench penName={penName} />
</>
);
};
//SECOND COMPONENT
const NextBench = ({ penName }) => {
return (
<>
<h1>Hello I am Next Bench.</h1>
<FirstBench penName={penName} />
</>
);
};
//THIRD COMPONENT
const FirstBench = () => {
return (
<>
<h1>Hey I am First Bench</h1>
</>
);
};
export default LastBench;
我们在第一个组件中调用第二个组件，然后传递名为 penName 的 props。之后我们在第二个组件中重复所有这些操作。我们调用最后一个组件，然后传递名为 penName 的 props。
import React, { useState } from "react";
//FIRST COMPONENT
const LastBench = () => {
const [penName, setPenName] = useState("Blue Gel Pen");
return (
<>
<h1>Hello I am Last Bench</h1>
<br />
<NextBench penName={penName} />
</>
);
};
//SECOND COMPONENT
const NextBench = ({ penName }) => {
return (
<>
<h1>Hello I am Next Bench.</h1>
<FirstBench penName={penName} />
</>
);
};
//THIRD COMPONENT
const FirstBench = ({ penName }) => {
return (
<>
<h1>Hey I am First Bench</h1>
<h4>{penName} Here i got My Pen</h4>
</>
);
};
export default LastBench;
现在您可以看到上面的代码，我们最终在最后一个组件中使用了在第一个组件中声明的 props。在第二个组件中，我们已经传递了 props，现在我们可以在第三个组件中使用这些 props。
这就是React Prop Drilling 的工作原理。
但是你可以在代码中看到，我们在第二个组件中使用的 props 是无用的。它们不需要这些 props，但是我们传递了这些 props 给第三个组件使用。
这就像你麻烦隔壁的板凳球员把笔传给第一个板凳球员一样。
为了避免这一切，我们使用了Context API。它的工作原理就像你打电话给老师，让他/她把这支笔给坐在第一个长凳上的朋友一样。
现在让我们使用 Context API 和 useContext hook 重构上面的代码。
我们必须使用 React.createContext() 在全局环境中创建一个对象。每个 context 对象都带有一个提供程序组件，该组件会为 context 对象分配一个值。要添加该值，我们必须传递“value”属性。
import React, { useState, useContext } from "react";
//FIRST COMPONENT
const TeacherContext = React.createContext();
const LastBench = () => {
const [penName, setPenName] = useState("Blue Gel Pen");
return (
<>
<h1>Hello I am Last Bench</h1>
<br />
<TeacherContext.Provider value={{ penName }}>
<NextBench />
</TeacherContext.Provider>
</>
);
};
//SECOND COMPONENT
const NextBench = () => {
return (
<>
<h1>Hello I am Next Bench.</h1>
<FirstBench />
</>
);
};
//THIRD COMPONENT
const FirstBench = () => {
return (
<>
<h1>Hey I am First Bench</h1>
<h4>Here i got My Pen</h4>
</>
);
};
export default LastBench;
在上面的代码中，我们利用 React.createContext() 创建了一个名为 TeacherContext 的对象，并在第一个组件中将该对象与带有 value 属性的 Provider 组件一起使用，并在其中创建了一个名为 PenName 的 props。
现在我们需要将 props 直接传递给最后一个组件。为此，我们需要使用“useContext”关键字。
import React, { useState, useContext } from "react";
//FIRST COMPONENT
const TeacherContext = React.createContext();
const LastBench = () => {
const [penName, setPenName] = useState("Blue Gel Pen");
return (
<>
<h1>Hello I am Last Bench</h1>
<br />
<TeacherContext.Provider value={{ penName }}>
<NextBench />
</TeacherContext.Provider>
</>
);
};
//SECOND COMPONENT
const NextBench = () => {
return (
<>
<h1>Hello I am Next Bench.</h1>
<FirstBench />
</>
);
};
//THIRD COMPONENT
const FirstBench = () => {
const { penName } = useContext(TeacherContext);
return (
<>
<h1>Hey I am First Bench</h1>
<h4>{penName} Here i got My Pen</h4>
</>
);
};
export default LastBench;
我们可以在上面的代码中看到“useContext”关键字将使第一个组件的 props 可供最后一个组件使用，最后我们在组件中使用该 prop。
结论
我们使用useContext hook 将第一个组件的值传递给最后一个组件，而不会干扰其他组件。
与我联系
鏂囩珷鏉ユ簮锛�https://dev.to/iamrishavraj1/what-is-react-prop-drilling-and-context-api-cjl感谢您阅读本博客 😀
我希望大家在阅读本博客后都能受益 🎉
请与您的朋友和家人分享，让他们也从中受益 🧡👍
在这里您可以与我联系https://connect.rishavraj.codes/