告別支柱鑽井！像專業人士一樣學習 React 中的 useContext-js教程-PHP中文網

Say Goodbye to Prop Drilling! Learn useContext in React Like a Pro

了解 React useContext Hook：初學者指南

在這份詳細指南中，我們將探索 React 中的 useContext 鉤子，涵蓋其基礎知識、常見挑戰和實用解決方案，以幫助您逐步掌握它。閱讀本文後，您將深入了解如何使用 useContext 在 React 應用程式中更有效地管理狀態。

介紹

React 提供了多種跨元件管理和共享狀態的方法。開發人員面臨的最常見挑戰之一是如何在深度嵌套的組件之間傳遞數據，而無需「道具鑽探」（透過多層向下傳遞道具）。 useContext 鉤子透過提供一種更優雅的方式來共享資料而無需進行 prop 鑽取，從而解決了這個問題。

在這篇文章中，我們將分解：

什麼是useContext？
為什麼以及何時應該使用它。
如何一步步實作useContext。
常見用例和進階場景。
常見問題。

讓我們開始吧！

什麼是 useContext？

useContext 鉤子是一種在元件之間全域存取和共用狀態而無需傳遞 props 的方法。它使您的元件能夠使用來自最近的上下文提供者的值。

這是一個簡單的類比：想像你在一個擠滿了人的房間裡，你想與房間裡的每個人分享訊息，而不需要向每個人低聲傳達相同的訊息。使用 useContext，您可以廣播該訊息一次，房間中的每個人都可以立即聽到它。

問題：支柱鑽井

考慮這樣一個場景，您有一個管理某些全域狀態的父元件，而多個深度嵌套的子元件需要存取該狀態。在這種情況下，您通常會使用 props 透過每個子元件向下傳遞資料。隨著組件樹的增長，這種方法很快就會變得很麻煩，從而導致所謂的「道具鑽探」。

道具鑽取使程式碼難以維護和擴展，並且當您透過多層組件重複傳遞道具時，它還會增加錯誤的可能性。

解決方案：useContext 來救援

React 的 useContext hook 是一個簡單有效的解決 prop 鑽取問題的方法。您可以建立一個上下文並在樹中的更高層級提供該上下文，而不是向元件樹的每個層級傳遞 props。樹中的任何元件都可以直接使用上下文，無論其深度為何。

useContext 如何運作？

useContext 鉤子與 React 中的 Context API 協同工作。以下是流程運作原理的詳細說明：

建立上下文：使用 React.createContext()，我們定義一個上下文來保存我們想要共享的資料。
提供上下文：將元件包裝在上下文提供者（Context.Provider）中，並將要共享的狀態作為值傳遞。
使用上下文：任何需要上下文資料的元件都可以使用 useContext 鉤子直接存取它，而不需要 props。

逐步範例：跨組件共享主題

讓我們來看一個完整的範例，其中我們使用 useContext 在多個元件之間管理和共享主題（淺色或深色模式）。

第 1 步：建立上下文

首先，在單獨的檔案 (ThemeContext.js) 中為您的主題建立上下文。

import { createContext } from 'react';

const ThemeContext = createContext(null);

export default ThemeContext;

登入後複製

第 2 步：提供背景信息

在您的 App.js 檔案中，使用 ThemeContext.Provider 包裝您的元件並提供一個值。

import React, { useState } from 'react';
import ThemeContext from './ThemeContext';
import Header from './Header';
import Content from './Content';

function App() {
  const [theme, setTheme] = useState('light');

  const toggleTheme = () => {
    setTheme((prevTheme) => (prevTheme === 'light' ? 'dark' : 'light'));
  };

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      <div className={`app ${theme}`}>
        <Header />
        <Content />
      </div>
    </ThemeContext.Provider>
  );
}

export default App;

登入後複製

第 3 步：使用上下文

在 Header.js 和 Content.js 元件中，使用 useContext 鉤子來消費主題值和toggleTheme函數。

import React, { useContext } from 'react';
import ThemeContext from './ThemeContext';

function Header() {
  const { theme, toggleTheme } = useContext(ThemeContext);

  return (
    <header className={`header ${theme}`}>
      <h1>{theme === 'light' ? 'Light Mode' : 'Dark Mode'}</h1>
      <button onClick={toggleTheme}>Toggle Theme</button>
    </header>
  );
}

export default Header;

登入後複製

進階範例：跨元件共用身份驗證狀態

在更複雜的場景中，您可以使用 useContext 來管理身份驗證狀態。例如，您可能有一個身份驗證上下文，用於儲存使用者的登入狀態並提供登入和登出等功能。

第 1 步：建立身份驗證上下文

import { createContext, useState } from 'react';

const AuthContext = createContext();

export function AuthProvider({ children }) {
  const [user, setUser] = useState(null);

  const login = (username) => {
    setUser({ username });
  };

  const logout = () => {
    setUser(null);
  };

  return (
    <AuthContext.Provider value={{ user, login, logout }}>
      {children}
    </AuthContext.Provider>
  );
}

export default AuthContext;

登入後複製

步驟 2：在元件中使用身份驗證上下文

您現在可以使用 useContext 鉤子存取任何元件中的驗證狀態。

import { createContext } from 'react';

const ThemeContext = createContext(null);

export default ThemeContext;

登入後複製

使用 useContext 的好處

避免 Prop 鑽取：透過使用 useContext，您可以在組件之間共享數據，而無需進行 prop 鑽取的麻煩。
簡化狀態管理：它提供了一種乾淨且有效率的方式來管理全域狀態，而無需外部函式庫。
靈活：您不僅可以共享狀態，還可以共享功能，從而更輕鬆地管理主題切換或身份驗證等複雜功能。

要避免的常見錯誤

不使用提供者：確保使用適當的提供者包裝使用上下文的組件。
使用上下文進行所有狀態管理：上下文對於全域狀態非常有用，但不要過度使用它。對於本機元件狀態，useState 或 useReducer 可能是更好的選擇。
重新渲染效能問題：使用上下文時要注意重新渲染，尤其是在數值頻繁變更的情況下。考慮透過記憶來優化表現。