useContext の習得: React の Context API の詳細

今日は、React での useContext フックの使用について説明します。これにより、コンポーネント間のデータの効率的な共有が可能になり、コンポーネントの通信が簡素化されます。

ReactのuseContextフックにより、props ドリルを必要とせずに、コンポーネント間でデータを効率的に共有できます。
複数レベルのコンポーネントを介して小道具を渡すことなく、コンポーネントがグローバル状態にアクセスする方法を提供することにより、コンポーネント通信を簡素化します。
これにより、コードベースがより整理されて保守しやすくなり、不要な再レンダリングを回避することでパフォーマンスが向上します。さらに、useContext は、Redux などの他の状態管理ライブラリの代替として使用できます。

useContextReact コンポーネントでフックを使用する方法の例を次に示します。

import React, { useContext } from 'react';

// Create the context
const MyContext = React.createContext();

// Provide a context value
function MyProvider({ children }) {
  const [value, setValue] = React.useState("Hello, World!");
  const providerValue = { value, setValue };
  return <MyContext.Provider value={providerValue}>{children}</MyContext.Provider>;
}

function MyComponent() {
  // Use the context
  const { value, setValue } = useContext(MyContext);

  return (
    <div>
        <p>{value}</p>
        <button onClick={() => setValue('Hello, React!')}>Change Value</button>
    </div>
  );
}

function App() {
  return (
    <MyProvider>
      <MyComponent />
    </MyProvider>
  );
}

MyProviderコンポーネントは、コンテキストに値を提供するコンポーネントです。フックを使用してuseState、コンテキストの初期値を設定します。次に、MyProviderコンポーネントは要素をレンダリングしますMyContext.Provider。要素はその子をラップし、コンテキストに値を提供します。valueとはsetValue、単一のオブジェクトとしてプロバイダーに渡されます。

MyComponentコンポーネントは、useContextフックを使用してコンテキストから値を消費するコンポーネントです。フックは、useContext前に作成したコンテキスト オブジェクトで呼び出され、コンテキストの現在の値を返します。この例では、コンテキストの値は文字列ですが、任意の型のデータである可能性があります。

次に、MyComponentコンポーネントは、コンテキストからの値を表示する段落要素とボタン要素を含む div 要素をレンダリングします。ボタンがクリックされると、setValue 関数が呼び出され、コンテキストの値が変更され、コンポーネントが次のように再レンダリングされます。更新された値を表示します。

最後に、コンポーネントは、コンポーネントとAppコンポーネントをレンダリングする最上位のコンポーネントです。このコンポーネントは、コンテキスト値をコンポーネントに提供し、コンポーネントをレンダリングします。MyProviderMyComponentMyProviderMyComponent

App コンポーネントがレンダリングされると、コンテキストの値を設定する MyProvider コンポーネントと、useContextフックを使用してコンテキストから値を取得する MyComponent コンポーネントがレンダリングされます。

この例でuseContextは、コンポーネント ツリーの複数のレベルに値を渡すことなく、フックによってコンポーネント間で値を簡単に共有できることがわかります。

よろしくお願いします

ハッピーコーディング！

提案をしたい:-

LinkedIn Twitter で私を見つけてください

[email protected] までメールでお問い合わせください