完全類型化、簡單的 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 寫的

以上是完全類型化、簡單的 React Context API 範例的詳細內容。更多資訊請關注PHP中文網其他相關文章！