掌握 React 的 useContext Hook：共享狀態管理簡單指南

React 中的 useContext Hook

useContext 鉤子是一個內建的 React 鉤子，它允許您直接存取 Context 的值，而不需要使用 Context.Consumer 元件。它簡化了在 React 應用程式中存取全域或共享資料的過程，例如使用者身份驗證、主題設定或語言首選項，而無需在元件樹的每個層級手動傳遞 props。

---

React 中的上下文是什麼？

在深入了解 useContext 之前，先了解 Context 很重要。在 React 中，Context 提供了一種在元件樹中共用配置或狀態等值的方法，而無需在每個層級手動傳遞 props。

• Context.Provider 用於包裝組件樹的一部分，並為該樹內的所有組件提供值。
• useContext 允許組件使用 Context.Provider.
提供的值

---

useContext 的語法

useContext 鉤子接受單一參數：Context 對象，並傳回目前上下文值。

const contextValue = useContext(MyContext);

• MyContext：這是您使用 React.createContext() 建立的上下文物件。

• contextValue：這是上下文提供的值。它可以是任何東西：物件、字串、數字等

---

useContext 如何運作

1. 建立上下文： 首先使用 React.createContext() 建立一個 Context。該上下文保存預設值。

   const MyContext = React.createContext('default value');

1. 提供上下文： Context.Provider 元件用於為其樹中的元件提供值。此樹中的任何元件都可以使用 useContext 存取上下文值。

   const App = () => {
     const user = { name: 'John Doe', age: 30 };

     return (
       <MyContext.Provider value={user}>
         <ComponentA />
       </MyContext.Provider>
     );
   };

1. 使用上下文： 在任何子元件內，使用 useContext 從上下文存取值。

   const ComponentA = () => {
     const user = useContext(MyContext); // Access the context value

     return (
       <div>
         <p>{user.name}</p>
         <p>{user.age}</p>
       </div>
     );
   };

• 在此範例中，ComponentA 可以存取使用者物件（由 MyContext.Provider 提供），而無需透過 props 明確接收它。

---

範例：使用 useContext 進行主題切換

這是一個範例，我們使用 useContext 實現簡單的主題切換功能。

第 1 步：建立上下文

const contextValue = useContext(MyContext);

第 2 步：提供上下文

使用 ThemeContext.Provider 包裝您的應用程式以提供值（當前主題）。

   const MyContext = React.createContext('default value');

第 3 步：使用上下文

在ComponentA中，您可以使用useContext存取目前主題。

const ComponentA = () =>; {
  const 主題 = useContext(ThemeContext); // 存取目前主題

  返回 （
    <div>



<ul>
<li>
<strong>說明：</strong>

<ul>
<li>
應用程式提供主題上下文值（“淺色”或“深色”）。 </li>
<li>
ComponentA 使用 useContext 來消費當前主題並相應地改變其樣式。 </li>
</ul>


</li>

</ul>


<hr>

<h3>
  
  
  <strong>組件中的多個上下文</strong>
</h3>

<p>您可以在單一元件中使用多個上下文。例如，同時使用 ThemeContext 和 UserContext：<br>
</p>

<pre class="brush:php;toolbar:false">const UserContext = createContext({ name: 'Alice' });
const ThemeContext = createContext('light');

const App = () =>; {
  返回 （
    <themecontext.provider value="dark">
      <usercontext.provider value="{{" name:>;
        >
      </usercontext.provider>
    </themecontext.provider>
  ）；
};

const 組件 = () => {
  const 主題 = useContext(ThemeContext);
  const 使用者 = useContext(UserContext);

  返回 （
    <div>




<hr>

<h3>
  
  
  <strong>何時使用 useContext</strong>
</h3>

<p><strong>useContext</strong> 鉤子在以下情況下最有用：</p>

<ol>
<li>
<strong>避免 Prop 鑽取：</strong> 在多層組件中深入傳遞 prop 可能會變得很麻煩。使用上下文，您可以避免這種情況，並允許樹的任何層級的元件使用共用值。 </li>
<li>
<strong>全域狀態管理：</strong>當您需要應用程式不同部分的許多元件可以存取全域狀態（如主題、驗證、使用者首選項）時。 </li>
<li>
<strong>跨組件共享資料：</strong>如果需要跨多個組件共享通用資料（例如，用戶資訊、設定、配置），useContext 提供了一個乾淨的解決方案。 </li>
</ol>


<hr>

<h3>
  
  
  <strong>性能考慮因素</strong>
</h3>

<p>雖然 <strong>useContext</strong> 很強大，但如果上下文值發生變化，它可能會導致重新渲染。每次上下文值更新時，使用該上下文的所有元件都會重新渲染。要最佳化此：</p>
<ul>
<li>
<strong>記憶上下文值</strong>：確保上下文值本身不會發生不必要的變更。 </li>
<li>
<strong>拆分上下文提供者</strong>：如果您的應用程式有多個共享數據，請將它們拆分到不同的上下文中，以最大程度地減少不必要的重新渲染。 </li>
</ul>


<hr>

<h3>
  
  
  <strong>useContext Hook 總結</strong>
</h3>

<ul>
<li>
<strong>useContext</strong> 允許您直接在功能元件中使用上下文值。 </li>
<li>使用React.createContext() 建立一個<strong>Context</strong>，並使用<strong>useContext</strong> 存取<strong>Context.Provider.</strong>
</li>有助於避免 prop 鑽取和在多個組件之間共享數據，而無需手動傳遞 props。 <li>
</li>最佳化情境消耗的效能需要仔細管理情境值和記憶。 <li>
</li>


</ul>

<hr>
  
  
  <h3>結論<strong>
</strong>

</h3>
<p>useContext<strong> 鉤子是管理 React 應用程式中共享狀態的重要工具。它簡化了使用上下文值的過程，並有助於避免不必要的 prop 鑽探，使您的 React 程式碼更具可讀性和可維護性。透過利用 useContext，您可以創建具有共享狀態的更靈活和可擴展的應用程序，可以由樹中的任何元件輕鬆存取。 </strong>


</p>


          <hr>

            
        </div>

以上是掌握 React 的 useContext Hook：共享狀態管理簡單指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！