Context APIを使用したグローバル値の管理

8393 ワード
React テキストリンク
  • の値は、素子F、Jに表示され、この値を変更するイベントが素子Gに発生する.
  • この場合、value値およびhandleSetValue関数はpropsとしてサブアセンブリに渡される.
    - value : Root -> A -> B -> F
  • value : Root -> H -> J
    -HandleSetValue:Root->A->B->E->G
  • プロジェクトの規模が拡大するにつれて、コンポーネントの深さが深くなり、処理されるデータ量が大きくなる可能性があるため、メンテナンスが困難になる.

    • 例


    ContextSample.js
    import React, { createContext, useContext } from "react";

function Child({ text }) {
  return <div>안녕하세요? {text}</div>;
}

function Parent({ text }) {
  return <Child text={text} />;
}

function GrandParent({ text }) {
  return <Parent text={text} />;
}

function ContextSample() {
  return <GrandParent text="Good" />;
}

export default ContextSample;
    *Contextの適用
    import React, { createContext, useContext } from "react";

// context에서 사용할 기본값 설정
const MyContext = createContext("defaultValue");

function Child() {
  const text = useContext(MyContext);
  return <div>안녕하세요? {text}</div>;
}

function Parent() {
  return <Child />;
}

function GrandParent() {
  return <Parent />;
}

function ContextSample() {
  return (
    <MyContext.Provider value="Good">
      <GrandParent />
    </MyContext.Provider>
  );
}

export default ContextSample;
  • useContext:React内蔵Hook
    • コンテキスト内の値を読み込む
  • MyContextに値を指定する場合は、コンテキストの最上位レベル(ContextSample)でコンテキスト内部のProviderコンポーネントを使用する必要があります.
  • コンテキストを作成する場合、createContext関数を使用してパラメータを渡し、プロバイダコンポーネントを使用しない場合にデフォルトになります.
  • Providerの値で渡される値がコンテキストの値となります.

    • 実習

  • の前に、ユーザリストを介してonToggleまたはonRemoveイベントをユーザコンポーネントに渡すようにユーザリストに要求される不要な動作がある.
    -解決策1.contextでonToggleとonRemoveを直接入れます.
  • 解決方法2.dispatchのみを入れる方法
  • UserDispatchという名前のコンテキストを作成します.デフォルト値は必要ないのでnullを追加します.
  • UserDispatchの値は、UserReducerとして受信したDispatchとして指定されます.
  • 既存のアプリケーション.jsのonToggleとonRemoveを削除します.
  • ユーザーリストのonToggle、onRemoveを削除し、ユーザー内部にonRemove、onToggleを作成します.(useContext Hook利用)
  • App.jsからUserDispatchをインポートし、dispatchを使用するコンテキストを作成します.

    • リファレンス


    https://velopert.com/3606
    Django DB設定(with.docker)
    線分樹テンプレート(NOTONLYSUCCESS神牛)