コンテキスト

Qwikは、propsのドリルダウン問題を解決するコンテキストAPIを提供しており、Reactの関数型`useContext()`と非常によく似ています。 実際、QwikのコンテキストAPIは、さまざまなコンポーネントにデータを伝えるための最も効率的な方法であり、オーバーヘッドを削減し、コード生成量を減らし、Qwikが未使用のデータをより効果的にツリーシェイクできるようにします。

QwikのコンテキストAPIは、`@builder.io/qwik`からインポートできる3つのメソッドで構成されています。

• createContextId(contextName: string): ContextId
• useContextProvider(ctx: ContextId, value: VALUE): void
• useContext(ctx: ContextId): VALUE

import { type Signal, component$, useSignal } from '@builder.io/qwik';
import {
  useContext,
  useContextProvider,
  createContextId,
} from '@builder.io/qwik';
 
export const ThemeContext = createContextId<Signal<string>>(
  'docs.theme-context'
);
 
export default component$(() => {
  const theme = useSignal('dark');
  useContextProvider(ThemeContext, theme);
  return (
    <>
      <button
        onClick$={() =>
          (theme.value = theme.value == 'dark' ? 'light' : 'dark')
        }
      >
        Flip
      </button>
      <Child />
    </>
  );
});
 
const Child = component$(() => {
  const theme = useContext(ThemeContext);
  return <div>Theme is {theme.value}</div>;
});

上記の例では、`docs.theme-context`という名前の`ContextId`が作成され、`default`コンポーネントに`useSignal`を提供するために使用されています。 `Child`コンポーネントは、`useContext`メソッドを使用して`useSignal`を取得し、その値をレンダリングします。

`createContextId()`

このメソッドは、新しい`ContextId`を作成するために使用されます。

export interface GenericType {
  ...
}
 
export const QwikCityContext = createContextId<GenericType>(name: string): ContextId<GenericType>;

パラメータ

• `name`：コンテキストの識別子として`createContextId`に与えられる一意の文字列です。 これは、複数のコンテキストがある場合の競合を回避します。 `io.builder.qwik.city`のような命名規則を使用することをお勧めします。

戻り値

`createContextId()`によって返される値は状態を保持しないことに注意してください。これは不変のIDオブジェクト、つまり`{ id: 'io.builder.qwik.city' }`です。 これは、アドレスや識別子のように、コンテキストの名前とタイプを記述するためにのみ使用されます。 状態を保持しないため、シングルトンとして初期化し、共有モジュールからエクスポートできます。

`useContextProvider()`

このメソッドは、`ContextId`をコンテキストのキー識別子として使用して、特定のコンポーネントとその子孫のコンテキストを作成するために使用されます。

import { component$, useStore, useContextProvider } from '@builder.io/qwik';
 
export const Parent = component$(() => {
 
  const qwikCityObject = useStore<GenericType>({
    ...
  });
 
  useContextProvider(QwikCityContext, qwikCityObject);
  useContextProvider(PlainArrayContext, [1, 2, 3])
  useContextProvider(AppNameContext, "My Qwik App")
 
  return (
    <Children />
  );
});

パラメータ

• `ContextId`：以前に作成されたコンテキストを提供する必要があり、2番目のパラメータとして提供されるデータの識別子として機能します。

• `data`：Qwikの`useSignal`、`useStore`、配列、オブジェクトなど、任意のデータ型を提供できます。

注意事項

• 提供された値は、レンダリングツリー全体でグローバルに使用できるわけではなく、ツリー内の子孫コンポーネントに対してのみ使用できます。
• サーバーサイドレンダリング（SSR)中にコンテキストが使用されない場合、シリアライズされません。SSR中に使用されていない場合でも、クライアントでコンテキストを使用できるようにするには、親コンポーネントで`useContext()`を呼び出す必要があります。 これにより、強制的にシリアライズされます。

`useContext()`

このメソッドは、親コンポーネントによって**提供**される`Context`の値を取得するために使用されます。

import { component$, useContext } from '@builder.io/qwik';
 
export const Children = component$(() => {
  const qwikCityObject = useContext(QwikCityContext);
  const plainArray = useContext(PlainArrayContext);
  const appName = useContext(AppNameContext);
 
  return (
    <div>Child components can use any of the provided values, such as {appName}</div>
  );
});