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 中国語 Web サイトの他の関連記事を参照してください。