Vollständig typisiertes, einfaches React-Kontext-API-Beispiel

Der Trick, sich nicht um die Kontexttypen kümmern zu müssen, ist einfach!

Wenn Sie die Kontext-API verwenden, ist das Babysitting dieser Art ein Problem.

Eine weitere Möglichkeit besteht darin, mehrere Importe verwenden zu müssen, um es bei Bedarf nutzen zu können.

Mit diesem Beispiel lösen wir beide Probleme und machen die Verwendung der React Context API schnell und einfach.

Beispiel zum Kopieren und Einfügen

Kopieren, einfügen und dann einfach alle „Beispiele“ durch die Namen ersetzen, die Sie benötigen, und schon kann es losgehen.

(Anschließend wird es eine vollständig kommentierte Version geben.)

import {
  createContext,
  useCallback,
  useContext,
  useDeferredValue,
  useMemo,
  useState,
} from 'react';

function useContextValue(init: number = 0) {
  const [state, setState] = useState(init);

  const doubleValue = state * 2;
  const defferedStringValue = useDeferredValue(state.toString());

  const reset = useCallback(() => {
    setState(init);
  }, []);

  const value = useMemo(
    () => ({
      state,
      doubleValue,
      defferedStringValue,
      reset,
    }),
    [
      state,
      doubleValue,
      defferedStringValue,
      reset,
    ],
  );

  return value;
}

type ExampleContext = ReturnType<typeof useContextValue>;

const Context = createContext<ExampleContext>(null!);

Context.displayName = 'ExampleContext';

export function ExampleContextProvider({
  children,
  initValue = 0,
}: {
  children: React.ReactNode;
  initValue?: number;
}) {
  const value = useContextValue(initValue);
  return <Context.Provider value={value}>{children}</Context.Provider>;
}

export function useExample() {
  const value = useContext(Context);

  if (!value) {
    throw new Error('useExample must be used within a ExampleContextProvider');
  }

  return value;
}

Kommentierte Version

import {
  createContext,
  useCallback,
  useContext,
  useDeferredValue,
  useMemo,
  useState,
} from 'react';

/**
 * We create a custom hook that will have everything
 * that would usually be in the context main function
 *
 * this way, we can use the value it returns to infer the
 * type of the context
 */
function useContextValue(init: number = 0) {
  // do whatever you want inside

  const [state, setState] = useState(init);

  const doubleValue = state * 2;
  const defferedStringValue = useDeferredValue(state.toString());

  // remember to memoize functions
  const reset = useCallback(() => {
    setState(init);
  }, []);

  // and also memoize the final value
  const value = useMemo(
    () => ({
      state,
      doubleValue,
      defferedStringValue,
      reset,
    }),
    [
      state,
      doubleValue,
      defferedStringValue,
      reset,
    ],
  );

  return value;
}

/**
 * Since we can infer from the hook,
 * no need to create the context type by hand
 */
type ExampleContext = ReturnType<typeof useContextValue>;

const Context = createContext<ExampleContext>(null!);

Context.displayName = 'ExampleContext';

export function ExampleContextProvider({
  children,
  /**
   * this is optional, but it's always a good to remember
   * that the context is still a react component
   * and can receive values other than just the children
   */
  initValue = 0,
}: {
  children: React.ReactNode;
  initValue?: number;
}) {
  const value = useContextValue(initValue);
  return <Context.Provider value={value}>{children}</Context.Provider>;
}

/**
 * We also export a hook that will use the context
 *
 * this way, we can use it in other components
 * by importing just this one hook
 */
export function useExample() {
  const value = useContext(Context);

  /**
   * this will throw an error if the context
   * is not used within the provider
   *
   * this also avoid the context being "undefined"
   */
  if (!value) {
    throw new Error('useExample must be used within a ExampleProvider');
  }

  return value;
}

Letzte Worte

Das ist es. Die Kontext-API ist einfacher und subtiler als sie sollte, aber sie ist ein leistungsstarkes Tool für die Fälle, in denen sie verwendet werden muss.

Denken Sie daran, dass die React Context API nicht Redux (oder andere Statusmanager) ist und Sie nicht den gesamten Anwendungsstatus hineinschieben sollten.

Na ja, das können Sie, aber es kann unnötige Probleme verursachen.

Dies wurde mit React < geschrieben. 19 im Hinterkopf: Mit dem neuen Compiler dürften das Auswendiglernen und unnötige Rendern keine Probleme mehr verursachen.

Das obige ist der detaillierte Inhalt vonVollständig typisiertes, einfaches React-Kontext-API-Beispiel. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!