ReactJS - createContext()

---

---

CreateContext 是一個 React 函式，允許我們為元件建立上下文。此函式提供或接收資料，而無需手動將 props 傳送到元件樹的每個級別。當資料需要在應用程式中的許多元件之間共享時，上下文最為重要。

語法

const MyContext = createContext(defaultVal)

引數

defaultVal − defaultVal 是我們希望上下文在樹上沒有匹配的上下文提供程式位於讀取上下文的元件之上時具有的值。如果我們沒有邏輯上的預設值，則將其保留為 null。

返回值

createContext() 函式返回一個上下文物件。此物件有兩個元件：Provider 和 Consumer。Provider 允許元件共享資料，而 Consumer 允許元件訪問該共享資料。

簡單來說，createContext 就像建立一個特殊的房間，元件可以將他們想要共享的資訊放在其中，而其他元件可以在不費吹灰之力的情況下獲取它。它使在 React 應用中共享資料更有條理且不那麼複雜。

示例

示例 - 在語言之間切換

React 中的上下文允許元件共享資料，而無需將其透過 props 傳遞。以下是如何使用一個簡單的示例建立和使用上下文 -

建立上下文 - 在下面的程式碼中，我們建立了一個 LanguageContext，其預設值為“English”。

import { createContext } from 'react';
const LanguageContext = createContext('English');

在元件中使用上下文 - 在下面的程式碼中，Greeting 元件現在可以訪問 LanguageContext，而無需將其作為 prop 接收。

import React, { useContext } from 'react';

function Greeting() {
   const language = useContext(LanguageContext);   
   return <p>{`Hello, ${language}!`}</p>;
}

在更高級別的元件中，包含以下上下文值 -

在 App 元件中，我們使用了 LanguageContext.Provider 來提供上下文值，在我們的例子中是“language”。此上下文將傳遞給 Greeting 元件以及其中包含的任何其他元件。當語言更改時，它們將自動更新。

import React, { useState } from 'react';

function App() {
   const [language, setLanguage] = useState('English');   
   return (
      <LanguageContext.Provider value={language}>
      <Greeting />
      <button onClick={() => setLanguage('Hindi')}>Switch to Hindi</button>
      </LanguageContext.Provider>
   );
}

export default App;

例如，如果我們點選“切換到 Hindi”選項，Greeting 元件將更改為顯示“Hello, Hindi!”。

完整程式碼

透過這種方式，Context 提供了一種乾淨有效的方式來在我們的 React 應用程式中通訊資料，而無需手動將其傳遞到元件樹的每個級別。

import React, { createContext, useContext, useState } from 'react';

// Create a LanguageContext
const LanguageContext = createContext('English');

// Create a Greeting component
function Greeting() {
   const language = useContext(LanguageContext);   
   return <p>{`Hello, ${language}!`}</p>;
}

// Create the App component
function App() {
   const [language, setLanguage] = useState('English');   
   return (
      <div style={{marginLeft: '500px'}}>
      <LanguageContext.Provider value={language}>
         <Greeting />
         <button onClick={() => setLanguage('Hindi')}>Switch to Hindi</button>
      </LanguageContext.Provider>
      </div>
   );
}

export default App;

輸出

示例 - 更改背景顏色應用

此 React 應用顯示了 createContext、useContext 和 useState hook 的用法，用於建立一個簡單的主題功能，其中元件的背景顏色根據所選顏色主題更改。此應用的程式碼如下所示 -

import React, { createContext, useContext, useState } from 'react';

// Create a ColorContext
const ColorContext = createContext('lightblue');
// Create a ThemedComponent component
function ThemedComponent() {
   const color = useContext(ColorContext);
   return <div style={{ backgroundColor: color, padding: '20px' }}>Themed
   Component</div>;
}

// Create the ColorApp component
function ColorApp() {
   const [color, setColor] = useState('lightblue');
   return (
      <div>
         <ColorContext.Provider value={color}>
            <ThemedComponent />
            <button onClick={() => setColor('lightblue')}>Switch to blue</button>
            <button onClick={() => setColor('lightpink')}>Switch to Pink</button>
         </ColorContext.Provider>
      </div>
   );
}
export default ColorApp;

輸出

示例 - 主題切換應用

此 React 應用顯示了 createContext、useContext 和 useState hook 的用法，用於實現主題切換功能。元件的背景顏色在淺色和深色主題之間切換，具體取決於使用者與按鈕的互動。此應用的程式碼如下所示 -

import React, { createContext, useContext, useState } from 'react';

// Create a ThemeContext
const ThemeContext = createContext('light');

// Create a ThemedContent component
function ThemedContent() {
   const theme = useContext(ThemeContext);
   return <div style={{ background: theme === 'light' ? '#fff' : '#333', padding: '20px' }}>Themed Content</div>;
}

// Create the ThemeSwitcherApp component
function ThemeSwitcherApp() {
   const [theme, setTheme] = useState('light');
   return (
      <div>
         <ThemeContext.Provider value={theme}>
         <ThemedContent />
         <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>Toggle Theme</button>
         </ThemeContext.Provider>
      </div>
   );
}

export default ThemeSwitcherApp;

輸出

總結

在本教程中，我們瞭解了 React 函式 createContext，它簡化了為元件建立上下文的步驟。createContext 的主要目標是允許元件共享或接收資料，而無需手動將 props 傳遞到元件樹的每個級別。當資料需要在應用程式的多個元件之間交換時，這尤其有用。