React Prop 鑽探：你該使用它嗎？-js教程-PHP中文網

不同的狀態管理策略。

React Prop Drilling 是從父元件到子元件的資料鑽取。這是傳遞應該可以在整個層級存取的資料。

React Prop Drilling: Should You Use It?

資料被傳送到子元件，子元件使用不同的協定顯示或取得資料。我們進行了大量的快取以避免重新渲染react元件，但是如果我們的應用程式很複雜且嵌套很深。每當道具更新時就會發生重新渲染。

讓我們了解螺旋鑽探，但試試

例如，如果您有這樣的元件層次結構：

ParentComponent
  ├── IntermediateComponent1
  │     └── IntermediateComponent2
  │           └── TargetComponent

登入後複製

如果 ParentComponent 有 TargetComponent 需要的一些數據，則道具鑽取涉及將數據從 ParentComponent 傳遞到 IntermediateComponent1 和 IntermediateComponent2，然後最終到達 TargetComponent。每個中間組件接收資料作為 props 並將其傳遞到下一個層級。

function App() {<br>
  const [user, setUser] = useState({ name: "John Doe" });

<p>return (<br>
    <div><br>
      <Parent user={user} /><br>
    </div><br>
  );<br>
}</p>

<p>function ParentComponent({ user }) {<br>
  return (<br>
    <div><br>
      <Child user={user} /><br>
    </div><br>
  );<br>
}</p>

<p>function Child({ user }) {<br>
  return (<br>
    <div><br>
      <Grandchild user={user} /><br>
    </div><br>
  );<br>
}</p>

<p>function Grandchild({ user }) {<br>
  return <div>Hello, {user.name}!</div>;<br>
}<br>
</p>

登入後複製

支柱鑽井：好還是壞？

這個問題的答案不是簡單的是/否，它完全取決於您的用例。有各種因素，例如應用程式的上下文和規模。

小型項目：對於主要為基本網站（例如作品集、基本產品頁面）的小型項目，可以使用道具鑽孔。為此類應用程式設定整個狀態管理工具（如 mobx 或 Redux）是沒有意義的。
狀態管理為專案帶來了不必要的複雜性，但使用螺旋鑽探可以輕鬆避免這種情況。

在 React 中使用 prop 鑽孔。

*資料共享
* 當深度嵌套的子元件需要存取父元件的資料或函數時，通常會使用 Prop 鑽取。例如，如果父元件保存應用程式的狀態或更新狀態的函數，而子元件需要存取或修改該狀態，則道具鑽探是使該資料或函數可存取的方法。
*明確資料流
* 螺旋槳鑽井的主要好處之一是它在應用程式內保持清晰明確的資料流。透過在每個元件中傳遞 props，資料的來源和傳遞方式總是顯而易見的，這可以簡化偵錯和理解程式碼。
*小型應用程式的簡單性
* 在較小的應用程式中或當元件層次結構相對較淺時，支柱鑽孔是一種簡單的解決方案，不需要額外的工具或函式庫。它允許開發人員在不引入複雜性的情況下管理狀態和傳遞資料。

React 中 prop 鑽孔的替代方案。

1.React上下文API

它是什麼： React 中的內建功能，可讓您在組件樹中共享數據，而無需在每個層級手動向下傳遞 props。
何時使用：適合共享全域數據，例如主題、使用者驗證狀態或區域設定。
您可以使用 Context API 來避免在元件樹的每個層級傳遞 props。 Context 可讓您建立可由任何元件存取的全域狀態，從而無需在每個層級手動傳遞 props。

優點：