ReactJS - 上下文

上下文是 React 中一個重要的概念。它提供了將資訊從父元件傳遞到其所有子元件（到任何巢狀級別）的能力，而無需在每個級別都透過 props 傳遞資訊。上下文將使程式碼更易讀且更易於理解。上下文可以用來儲存不更改或更改最少的資訊。上下文的一些用例如下：

• 應用程式配置

• 當前已認證的使用者的資訊

• 當前使用者設定

• 語言設定

• 應用程式/使用者主題/設計配置

讓我們在本節中學習如何建立上下文及其用法。

上下文是如何工作的？

讓我們學習上下文的 基本概念以及它是如何工作的。上下文有四個部分：

• 建立一個新的上下文

• 在根元件中設定上下文提供者

• 在我們需要上下文資訊的元件中設定上下文消費者

• 訪問上下文資訊並在渲染方法中使用它

讓我們建立一個應用程式來更好地理解上下文及其用法。讓我們為在應用程式根元件中維護主題資訊建立一個全域性上下文，並在我們的子元件中使用它。

首先，使用以下命令建立並啟動一個應用程式：

create-react-app myapp
cd myapp
npm start

接下來，在 components 資料夾下建立一個元件 HelloWorld （src/components/HelloWorld.js）

import React from "react";
import ThemeContext from "../ThemeContext";
class HelloWorld extends React.Component {
   render() {
      return <div>Hello World</div>
   }
}
export default HelloWorld

接下來，使用一個新的上下文 (src/ThemeContext.js) 來維護主題資訊。

import React from 'react'
const ThemeContext = React.createContext({
   color: 'black',
   backgroundColor: 'white'
})
export default ThemeContext

這裡，

• 使用 React.createContext 建立了一個新的上下文。

• 上下文被建模為一個包含樣式資訊的 物件。

• 設定文字顏色和背景的初始值。

接下來，更新根元件 App.js，包括 HelloWorld 元件和主題提供者，併為主題上下文提供初始值。

import './App.css';
import HelloWorld from './components/HelloWorld';
import ThemeContext from './ThemeContext'

function App() {
   return (
      <ThemeContext.Provider value={{
         color: 'white',
         backgroundColor: 'green'
      }}>
      <HelloWorld />
      </ThemeContext.Provider>
   );
}
export default App;

這裡，使用了 ThemeContext.Provider，它是一個非可視元件，用於設定主題上下文的值，以便在其所有子元件中使用。

接下來，在 HelloWorld 元件中包含一個上下文消費者，並使用 HelloWorld 元件中的主題資訊來設定 hello world 訊息的樣式。

import React from "react";
import ThemeContext from "../ThemeContext";
class HelloWorld extends React.Component {
   render() {
      return  (
         <ThemeContext.Consumer>
         {({color, backgroundColor} ) =>
            (<div style={{
               color: color,
               backgroundColor: backgroundColor }}>
               Hello World
            </div>)
         }
         </ThemeContext.Consumer>
      )
   }
}
export default HelloWorld

這裡，

• 使用了 ThemeContext.Consumer，它是一個非可視元件，提供了訪問當前主題上下文詳細資訊的功能

• 使用了函式表示式來獲取 ThemeContext.Consumer 內部的當前上下文資訊

• 使用了物件解構語法來獲取主題資訊並將值設定為 color 和 backgroundColor 變數。

• 使用主題資訊透過 style props 設定元件的樣式。

最後，開啟瀏覽器並檢查應用程式的輸出

總結

上下文減少了在 React 應用中維護全域性資料的複雜性。它提供了一個清晰的提供者和消費者概念，簡化了上下文的實現。