Atoms: وحدة الحالة في Jotai

في Jotai، تُقسّم الحالة إلى ذرات: وهي أجزاء صغيرة ومستقلة من الحالة التفاعلية. تحتفظ كل ذرة بقيمة واحدة، وتُنشأ خارج المكوّنات باستخدام atom(initialValue).

يعكس هذا نموذجًا ذهنيًا يقسّم الحالة إلى أصغر وحدات ذات معنى، بدلًا من وضعها في كائن مخزن واحد كبير.

عندما تتغير قيمة ذرة، يُعاد عرض المكوّنات التي اشتركت في تلك الذرة المحددة فقط. أما المكوّنات التي تقرأ ذرات أخرى فلا تتأثر.

تُعد هذه التفاعلية الدقيقة الميزة الأساسية لـ Jotai مقارنةً بـ React Context، الذي يعيد عرض جميع المستهلكين عند حدوث أي تغيير.

عرّف الذرات على مستوى الوحدة: const countAtom = atom(0). يضمن ذلك ثبات هوية الذرة عبر عمليات إعادة العرض، ويمنع إعادة إنشائها عند تركيب المكوّن في كل مرة.

الذرات مراجع خفيفة؛ فهي لا تحتفظ بقيمتها الخاصة. بل توجد القيمة في مخزن Jotai.

يستخدم Jotai افتراضيًا مخزنًا عامًا ضمنيًا. ولا تحتاج إلى إحاطة تطبيقك بـ Provider لبدء استخدام الذرات، مما يجعل اعتماده سهلًا في المشاريع الحالية.

يمكن الوصول إلى الذرات عالميًا من أي مكوّن في شجرة المكوّنات، من دون تمرير الخصائص عبر مستويات متعددة أو تمرير السياق يدويًا.

عندما تحتاج إلى مثيلات مستقلة متعددة من شجرة المكوّنات نفسها (مثل نموذجين منفصلين، لكل منهما ذرات حالة النموذج الخاصة به)، أحط كل مثيل بـ Provider من Jotai. ينشئ كل Provider مخزنًا معزولًا.

يفيد ذلك في بنى التطبيقات ذات الواجهات المصغّرة أو تخطيطات الصفحات المعقدة التي تحتوي على جزر حالة مستقلة.

يحتفظ المخزن العام بالذرات طوال مدة تشغيل التطبيق. ويُعاد ضبط مخزن Provider محدود النطاق عند إلغاء تحميل Provider، مما يجعله مناسبًا لمربعات الحوار أو حالة مستوى الصفحة التي ينبغي ألا تستمر عالميًا.

يمكنك أيضًا تمرير مثيل مخزن مخصص إلى Provider لعزل العرض من جانب الخادم.

يستخدم Zustand كائن مخزن واحدًا مع selectors لمنع عمليات إعادة العرض غير الضرورية. أما Jotai فيقسّم الحالة إلى ذرات، ويشترك كل مكوّن في الذرات التي يقرأها فقط.

يُعد Jotai أكثر ملاءمة لحالة واجهة المستخدم الدقيقة، مثل قيم حقول الإدخال الفردية ومفاتيح التبديل. بينما يناسب Zustand حالة التطبيق الأكبر والمترابطة.

يعيد React Context عرض كل مكوّن مستهلك عند تغير قيمة السياق، حتى إذا كان المكوّن المستهلك يحتاج إلى حقل واحد فقط من كائن السياق.

يحل Jotai هذه المشكلة؛ فالمكوّن الذي يستخدم useAtom(nameAtom) يُعاد عرضه فقط عند تغير nameAtom، وليس عند تغير أي ذرة أخرى.

يستخدم Jotai المقارنة Object.is افتراضيًا لتحديد ما إذا كانت قيمة الذرة قد تغيرت. وإذا عيّنت للذرة القيمة نفسها التي تحتفظ بها بالفعل، فلن تُشغّل عملية إعادة عرض.

بالنسبة إلى الكائنات المعقدة، استخدم الأداة selectAtom لاشتقاق قيمة بدائية ثابتة من ذرة كبيرة، مما يمنع إعادة العرض عند تغير الحقول غير المرتبطة.

تكون useState محلية لمكوّن واحد. أما الذرات فمشتركة عبر شجرة المكوّنات بأكملها من دون تمرير صريح. وعندما يقرأ مكوّنان شقيقان الذرة نفسها، يظلان متزامنين تلقائيًا.

يلغي ذلك الحاجة إلى رفع الحالة لمشاركتها بين المكوّنات، مع الحفاظ على الحد الأدنى من عمليات إعادة العرض.

من الذرات الشائعة: const themeAtom = atom('light'), const cartItemsAtom = atom([]), const selectedUserIdAtom = atom(null). تُعرّف هذه الذرات مرة واحدة، ويمكن استيرادها من أي مكان في التطبيق.

كل ذرة مستقلة؛ فتحديث cartItemsAtom لا يؤدي إلى إعادة عرض المكوّنات التي تقرأ themeAtom فقط.

كيف يختلف Jotai عن React Context من حيث إعادة التصيير؟

تُعد الذرات الوحدة الأساسية للحالة في Jotai، وتنشئها باستخدام atom(initialValue) خارج المكوّنات، وتتم مشاركتها عبر شجرة المكوّنات من دون Provider افتراضيًا. عند تغيّر إحدى الذرات، تُعاد تصيير مشتركيها فقط.

تُعد قابلية التفاعل الدقيقة هذه الميزة الأساسية لـ Jotai مقارنةً بـ React Context، كما يختلف نموذج الاشتراك لكل ذرة فيه عن نهج المتجر الواحد في Zustand.