إن الحيلة المتمثلة في عدم الاضطرار إلى مجالسة أنواع السياق أمر سهل!

إذا كنت تستخدم واجهة برمجة تطبيقات السياق، فستكون إحدى المشكلات هي مجالسة الأطفال بأنواعها.

هناك طريقة أخرى تتمثل في الحاجة إلى استخدام عمليات استيراد متعددة لاستخدامها عندما تحتاج إليها.

باستخدام هذا المثال، قمنا بحل كلتا المشكلتين وجعل استخدام 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;

const Context = createContext(null!);

Context.displayName = 'ExampleContext';

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

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;

const Context = createContext(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 {children};
}

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

الكلمات النهائية

هذا كل شيء. تعد واجهة برمجة تطبيقات السياق أسهل وأكثر دقة مما ينبغي، ولكنها أداة قوية للحالات التي يلزم استخدامها.

فقط تذكر أن واجهة برمجة تطبيقات React context ليست Redux (أو مديري الحالة الآخرين) ويجب ألا تضع حالة التطبيق بالكامل فيها.

حسنًا، يمكنك ذلك، لكنه قد يسبب مشاكل غير ضرورية.

تمت كتابة هذا مع وضع React