揭開 React Context 的秘密：力量、陷阱和性能

React Context 是一個很棒的工具——就像一個神奇的管道，可以跨組件傳遞共享數據，而不會出現道具鑽取的混亂。但這種便利性帶來了一個問題：未經檢查的使用可能會導致效能瓶頸，從而削弱您的應用程式。

在這篇部落格中，我們將探索如何掌握 React Context，同時避開常見的陷阱。最後，您將成為 Context 專業人士，擁有優化的高效能應用程式。

---

1.什麼是 React Context 以及為什麼你應該關心？

React Context 是將應用程式的元件編織在一起的無形執行緒。它可以實現資料共享，而無需在元件樹的每一層傳遞 props。

這是一個簡單的範例：

const ThemeContext = React.createContext('light'); // Default: light theme

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
  );
}

function ThemedButton() {
  const theme = React.useContext(ThemeContext);
  return <button>




<hr>

<h2>
  
  
  <strong>2. The Hidden Dangers of React Context</strong>
</h2>

<h3>
  
  
  <strong>Context Change = Full Re-render</strong>
</h3>

<p>Whenever a context value updates, all consumers re-render. Even if the specific value a consumer uses hasn’t changed, React doesn’t know, and it re-renders anyway.</p>

<p>For example, in a responsive app using AdaptivityContext:<br>
</p>

<pre class="brush:php;toolbar:false">const AdaptivityContext = React.createContext({ width: 0, isMobile: false });

function App() {
  const [width, setWidth] = React.useState(window.innerWidth);
  const isMobile = width <= 680;

  return (
    <AdaptivityContext.Provider value={{ width, isMobile }}>
      <Header />
      <Footer />
    </AdaptivityContext.Provider>
  );
}

在這裡，AdaptivityContext 的每個用戶都會在任何寬度變化時重新渲染 - 即使他們只關心 isMobile。

---

3.透過最佳實務增強環境

規則 1：縮小上下文

將上下文分解為邏輯單元，以防止不必要的重新渲染。

const SizeContext = React.createContext(0);
const MobileContext = React.createContext(false);

function App() {
  const [width, setWidth] = React.useState(window.innerWidth);
  const isMobile = width <= 680;

  return (
    <SizeContext.Provider value={width}>
      <MobileContext.Provider value={isMobile}>
        <Header />
        <Footer />
      </MobileContext.Provider>
    </SizeContext.Provider>
  );
}

規則 2：穩定上下文值

使用 useMemo 避免在每次渲染時為上下文值建立新物件。

const memoizedValue = React.useMemo(() => ({ isMobile }), [isMobile]);

<MobileContext.Provider value={memoizedValue}>
  <Header />
</MobileContext.Provider>;

規則 3：使用較小的上下文消費者

將上下文相關的程式碼移到更小的、獨立的元件中以限制重新渲染。

function ModalClose() {
  const isMobile = React.useContext(MobileContext);
  return !isMobile ? <button>Close</button> : null;
}

function Modal() {
  return (
    <div>
      <h1>Modal Content</h1>
      <ModalClose />
    </div>
  );
}

---

4.當背景不夠時：了解你的極限

上下文適合全域、輕量級數據，例如主題、區域設定或使用者身份驗證。對於複雜的狀態管理，請考慮 Redux、Zustand 或 Jotai 等函式庫。

---

5.備忘單：React 上下文概覽

Concept	Description	Example
Create Context	Creates a context with a default value.	const ThemeContext = React.createContext('light');
Provider	Makes context available to child components.	...
useContext Hook	Accesses the current context value.	const theme = React.useContext(ThemeContext);
Split Contexts	Separate context values with different update patterns.	const SizeContext = React.createContext(); const MobileContext = React.createContext();
Stabilize Values	Use useMemo to stabilize context objects.	const memoValue = useMemo(() => ({ key }), [key]);
Avoid Full Re-renders	Isolate context usage in smaller components or use libraries like use-context-selector.	{({ isMobile }) => ...}
When Not to Use Context	Avoid for complex state; use dedicated state management libraries.	Use Redux or Zustand for large-scale state management.

概念

---

描述

範例 標題> 建立上下文

建立具有預設值的上下文。 const ThemeContext = React.createContext('light'); 提供者

---

使上下文可供子元件使用。 ...

useContext 鉤子

存取目前上下文值。 const 主題 = React.useContext(ThemeContext); 分割上下文 具有不同更新模式的單獨上下文值。 const SizeContext = React.createContext(); const MobileContext = React.createContext();

穩定價值觀

使用 useMemo 來穩定上下文物件。 const memoValue = useMemo(() => ({ key }), [key]); 避免完全重新渲染

隔離較小元件中的上下文使用或使用 use-context-selector 等函式庫。 {({ isMobile }) =>; ...} 何時不使用上下文

避免複雜狀態；使用專用的狀態管理函式庫。 使用 Redux 或 Zustand 進行大規模狀態管理。 表>

6. React Context 的未來

---

React 團隊正在積極開發上下文選擇器，該功能允許元件僅訂閱特定的上下文值。在那之前，use-context-selector 和 React-tracked 等工具都是很好的選擇。 7.要點 React Context 很強大，但不是靈丹妙藥。 上下文管理不善可能會導致效能顯著下降。 透過遵循分割上下文、穩定價值和優化消費者等最佳實踐，您可以釋放其全部潛力。 立即開始實施這些技術，將您的 React 應用程式提升到一個新的水平！ ？

以上是揭開 React Context 的秘密：力量、陷阱和性能的詳細內容。更多資訊請關注PHP中文網其他相關文章！