React Context 是一個全局變量

在 Javascript 中，變量的作用域位于函數(shù)定義內(nèi)。

用示例解釋 React 中的作用域上下文

React Context 通常被描述為一種管理全局狀態(tài)的機制，充當(dāng)可跨 React 組件樹訪問的共享變量。雖然這個描述是準(zhǔn)確的，但它過于簡化了 Context 的功能。在本文中，我們將深入探討如何有效地確定 Context 的范圍，確保僅在需要的地方使用它并避免不必要的重新渲染。

什么是 React 上下文？

React Context 提供了一種通過組件樹傳遞數(shù)據(jù)的方法，而無需在每個級別手動傳遞 props。它是使用 React.createContext 創(chuàng)建的，由 Provider 和 Consumer 對組成。 Provider 組件提供值，任何用 Consumer 或 useContext 鉤子包裝的組件都可以訪問它。

這是一個基本示例：

import React, { createContext, useContext } from "react";

const ThemeContext = createContext("light");

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

function Toolbar() {
  return <ThemedButton />;
}

function ThemedButton() {
  const theme = useContext(ThemeContext);
  return <button>{`Theme: ${theme}`}</button>;
}

export default App;

在此示例中，ThemedButton 可以訪問 ThemeContext.Provider 提供的主題值，而無需通過 Toolbar 顯式傳遞 props。

為什么是范圍上下文？

雖然 Context 很強大，但不加區(qū)別地使用它可能會導(dǎo)致性能問題。當(dāng) Context.Provider 提供的值發(fā)生更改時，使用該上下文的所有組件都將重新呈現(xiàn)。在復(fù)雜的應(yīng)用程序中，這可能會導(dǎo)致不相關(guān)組件不必要的重新渲染。

Scoped Context 是指將 Context 的使用限制在組件樹中真正需要它的部分的做法。這種方法有助于保持性能并保持組件結(jié)構(gòu)干凈且易于理解。

復(fù)合組件面臨的挑戰(zhàn)

考慮涉及復(fù)合組件的場景，例如 Radix Primitives 等庫提供的組件。這些組件通常在內(nèi)部使用 Context 來管理狀態(tài)和交互。然而，當(dāng)相似的組件組合在一起時，可能會出現(xiàn)問題，導(dǎo)致上下文沖突。

基數(shù)基元示例

Radix Primitives 提供了高度可組合的 API，用于構(gòu)建可訪問的組件。這是一個例子：

<AlertDialog.Root>
  <Dialog.Root>
    <Dialog.Trigger />
    <Dialog.Content>
      <AlertDialog.Trigger /> {/* note the alert trigger in dialog content */}
    </Dialog.Content>
  </Dialog.Root>

  <AlertDialog.Content />
</AlertDialog.Root>

這里出現(xiàn)了一個問題，因為 AlertDialog 是 Dialog 的組合，具有滿足 AlertDialog 要求的附加功能。這意味著AlertDialog.Root也是一個Dialog.Root，因此它同時提供了DialogContext和AlertDialogContext。

在此設(shè)置中，AlertDialog.Trigger（也是 Dialog.Trigger）可能會通過 useContext(DialogContext) 檢索錯誤的上下文，最終得到來自 Dialog.Root 而不是 AlertDialog.Root 的上下文。因此，單擊 AlertDialog.Trigger 可能會切換 Dialog.Content，而不是按預(yù)期運行。

范圍上下文解決方案

為了防止此類問題，Radix Primitives 使用作用域上下文。作用域上下文確保 AlertDialog.Trigger 僅與 AlertDialog 部件交互，并且不會意外地從類似組成的組件中檢索上下文。這是通過在內(nèi)部創(chuàng)建一個新上下文并通過自定義屬性（例如 __scopeDialog）將其傳遞給 Dialog 組件來實現(xiàn)的。然后，Dialog 組件在其 useContext 調(diào)用中使用此作用域上下文，以確保隔離。

來自 radix ui github 存儲庫的源代碼：

https://github.com/radix-ui/primitives/blob/dae8ef4920b45f736e2574abf23676efab103645/packages/react/dialog/src/Dialog.tsx#L69

以下是作用域上下文在 Radix UI 中如何工作的抽象：

1. 范圍創(chuàng)建：createScope 實用程序為每個組件或復(fù)合組件生成唯一的命名空間。這確保了每組上下文都是隔離的并且不會與其他上下文發(fā)生沖突。
   

   import React, { createContext, useContext } from "react";
   
   const ThemeContext = createContext("light");
   
   function App() {
     return (
       <ThemeContext.Provider value="dark">
         <Toolbar />
       </ThemeContext.Provider>
     );
   }
   
   function Toolbar() {
     return <ThemedButton />;
   }
   
   function ThemedButton() {
     const theme = useContext(ThemeContext);
     return <button>{`Theme: ${theme}`}</button>;
   }
   
   export default App;
   

2. 作用域提供者：創(chuàng)建上下文時，它們與作用域綁定。這將提供者和消費者綁定到同一個命名空間。
   

   <AlertDialog.Root>
     <Dialog.Root>
       <Dialog.Trigger />
       <Dialog.Content>
         <AlertDialog.Trigger /> {/* note the alert trigger in dialog content */}
       </Dialog.Content>
     </Dialog.Root>
   
     <AlertDialog.Content />
   </AlertDialog.Root>
   

3. 消費者隔離：作用域掛鉤，如 useDialogScope，確保消費者僅訪問其預(yù)期范圍內(nèi)的上下文。
   

   import { createScope } from '@radix-ui/react-context';
   
   const [createDialogContext, useDialogScope] = createScope('Dialog');
   

范圍上下文的好處

• 上下文沖突預(yù)防：通過確定上下文范圍，AlertDialog.Trigger 等組件始終可以找到其關(guān)聯(lián)的上下文 (AlertDialogContext)，即使嵌套在其他上下文中也是如此。

• 靈活組合：作用域上下文支持靈活安全的組件組合，確保交互保持可預(yù)測。

• 可重用性：開發(fā)人員可以在不同范圍內(nèi)重用通用組件（例如 Dialog.Trigger），無需修改。

它如何應(yīng)用于示例

在您的示例中：

• AlertDialog.Root 創(chuàng)建一個有作用域的 AlertDialogContext，封裝其狀態(tài)和交互。

• 嵌套的 Dialog.Root 和 AlertDialog.Trigger 共存而不會發(fā)生沖突，因為它們各自引用其各自的作用域上下文。

• 此設(shè)計模式是 Radix UI 的一個關(guān)鍵功能，可確保復(fù)雜的組件層次結(jié)構(gòu)無縫工作，而不會出現(xiàn)意外行為。

參考：

1. https://dev.to/romaintrotard/use-context-selector-demystified-4f8e

2. https://github.com/radix-ui/primitives

3. https://react.dev/reference/react/createContext

以上是用例子解釋 React 中的作用域上下文的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！