완전히 유형화되고 쉬운 React Context API 예제

컨텍스트 유형을 관리하지 않아도 되는 비결은 쉽습니다!

컨텍스트 API를 사용하는 경우 한 가지 문제는 해당 유형의 보육입니다.

또 다른 하나는 필요할 때 사용하기 위해 여러 가져오기를 사용해야 한다는 것입니다.

이 예를 통해 두 가지 문제를 모두 해결하고 React Context API를 빠르고 쉽게 사용할 수 있습니다.

복사 붙여넣기 예시

복사하여 붙여넣은 다음 모든 "예제"를 원하는 이름으로 바꾸면 바로 사용할 수 있습니다.

(나중에 풀댓글 버전이 나올 예정입니다.)

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;
}

댓글이 달린 버전

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;
}

최종 단어

그렇습니다. Context API는 생각보다 쉽고 정교하지만 사용해야 하는 경우에는 강력한 도구입니다.

React Context API는 Redux(또는 다른 상태 관리자)가 아니며 전체 애플리케이션 상태를 여기에 넣어서는 안 된다는 점을 기억하세요.

그렇습니다. 하지만 불필요한 문제가 발생할 수 있습니다.

이 글은 React < 19를 염두에 두고 새로운 컴파일러가 출시되면 암기 및 불필요한 렌더링은 문제가 발생하지 않을 수 있습니다.

위 내용은 완전히 유형화되고 쉬운 React Context API 예제의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!