React 上下文 API 概述

React Context API 是一項功能，可讓您在多個元件之間共用狀態（資料），而無需在元件樹的每個層級手動向下傳遞 props。它簡化了狀態管理，特別是在許多元件需要存取相同資料的大型應用程式中。

關鍵概念：

1. 上下文建立： 您可以使用 React.createContext() 建立上下文。

   const MyContext = React.createContext();

1. 提供者： 提供者元件用於包裝應用程式中您希望上下文可存取的部分。它將上下文值傳遞給其子級。

   <MyContext.Provider value={someValue}>
     {children}
   </MyContext.Provider>

1. 消費者： 需要存取上下文的元件可以使用 Context.Consumer 或 useContext 掛鉤（在功能元件中更常見）。

   const someValue = useContext(MyContext);

用法範例：

1. 建立上下文：

   const ThemeContext = React.createContext();

1. 在父元件中提供上下文：

   const App = () => {
     const theme = 'dark';

     return (
       <ThemeContext.Provider value={theme}>
         <ChildComponent />
       </ThemeContext.Provider>
     );
   };

1. 使用子元件中的上下文：

   const ChildComponent = () => {
     const theme = useContext(ThemeContext);

     return <div>Current theme: {theme}</div>;
   };

何時使用上下文 API：

• 全域狀態：對於共用需要由許多元件存取的狀態很有用，例如驗證狀態、主題或語言設定。
• 避免道具鑽探：有助於避免透過多層組件傳遞道具。

以上是React 上下文 API 概述的詳細內容。更多資訊請關注PHP中文網其他相關文章！