في هذه المقالة، سننظر في كيفية التخلص من React.Context في تطبيقاتك وإيجاد دافع للقيام بذلك.

ربما تكون على دراية بـ React وربما تكون لديك بالفعل خبرة في استخدام React.Context إذا وصلت إلى هذه المقالة، ولكن إذا لم تكن كذلك، فلا تتردد في قراءتها على أي حال ومشاركتها مع الأشخاص الذين قد يكونون مهتمين.

1. لماذا تتجنب React.Context؟

يؤدي السياق إلى تدهور إمكانية القراءة والتشابك وتقييد التطبيق.

ألق نظرة على هذا المثال الأساسي:

لا يبدو الأمر مفهومًا وموثوقًا للغاية، أليس كذلك؟

إليك بعض المشكلات المحتملة عند استخدام السياقات:

1. كلما زاد عدد السياقات المستخدمة، أصبح تطبيقك أقل قابلية للقراءة والتحكم؛
2. في بعض الأحيان تتطلب السياقات المتداخلة ترتيبًا صحيحًا للعمل، مما يجعل صيانة تطبيقك صعبة؛
3. يجب إعادة استخدام بعض السياقات أثناء إعداد بيئة الاختبار لمواصلة العمل بشكل صحيح؛
4. يجب عليك التأكد من أن المكون هو عنصر فرعي أسفل شجرة موفر السياق الضروري.

حقيقة ممتعة: "جحيم الوعد" المشهور يبدو متشابهًا ?‍♂️

loadClients()
  .then((client) => {
    return populate(client)
      .then((clientPopulated) => {
        return commit(clientPopulated);
      });
  });

2. كيفية استبدال React.Context؟

إنشاء خطافات بدلاً من ذلك.

دعونا نستبدل ThemeContext من المثال أعلاه بخطاف useTheme مخصص:

import { useAppEvents } from 'use-app-events';

const useTheme = () => {
  const [theme, setTheme] = useState('dark');

  /** Set up communication between the instances of the hook. */
  const { notifyEventListeners, listenForEvents } = useAppEvents();

  listenForEvents('theme-update', (themeNext: string) => {
    setTheme(themeNext);
  });

  const updateTheme = (themeNext: string) => {
    setTheme(themeNext);

    notifyEventListeners('theme-update', themeNext);
  };

  return {
    theme,
    updateTheme,
  };
};

استخدمنا حزمة npm تسمى أحداث use-app للسماح لجميع مثيلات خطاف useTheme بالاتصال لمزامنة حالة السمة الخاصة بها. فهو يضمن أن قيمة السمة ستكون هي نفسها عند استدعاء useTheme عدة مرات حول التطبيق.

علاوة على ذلك، وبفضل حزمة أحداث التطبيق، ستتم مزامنة السمة حتى بين علامات تبويب المتصفح.

في هذه المرحلة، لم تعد هناك حاجة إلى ThemeContext حيث يمكن استخدام خطاف useTheme في أي مكان في التطبيق للحصول على السمة الحالية وتحديثها:

const App = () => {
  const { theme, updateTheme } = useTheme();

  updateTheme('light');

  // Output: 
Current theme: light
  return 
Current theme: {theme}
;
}

ما هي إيجابيات هذا النهج:

1. لا حاجة لإعداد خطاف في مكان ما أعلى الشجرة قبل أن يتمكن الأطفال من استخدامه (بما في ذلك بيئات الاختبار)؛
2. بنية العرض أكثر وضوحًا، مما يعني عدم وجود بنية على شكل سهم مربكة مبنية على سياقاتك؛
3. تتم مزامنة الحالة بين علامات التبويب.

خاتمة

كانت React.Context أداة قوية منذ بعض الوقت بالتأكيد، ولكن الخطافات توفر طريقة أكثر تحكمًا وموثوقية لإدارة الحالة العامة لتطبيقك إذا تم تنفيذها بشكل صحيح بالتزامن مع حزمة أحداث use-app.