قراءة Atoms وكتابتها باستخدام useAtom

يعيد useAtom(someAtom) القيمة ودالة التعيين معًا بالشكل [value, setter]، محاكيًا واجهة برمجة التطبيقات الخاصة بـ useState. تمثل value الحالة الحالية للذرة، بينما تحدّثها setter. استخدموا هذا الخطاف عندما يقرأ المكوّن الذرة ويكتب فيها معًا.

تقبل setter إما قيمة جديدة أو دالة تحديث: setCount(c => c + 1).

يعيد useAtomValue(someAtom) القيمة الحالية فقط، من دون setter. استخدموه في المكوّنات المخصصة للعرض فقط، التي تقرأ الحالة ولا تعدّلها مطلقًا.

بما أن المكوّن لا يحتفظ بمرجع إلى setter، فإن الغرض منه يكون موثقًا بوضوح في الشيفرة: هذا المكوّن قارئ خالص.

يعيد useSetAtom(someAtom) دالة setter فقط. والأهم أنه لا يجعل المكوّن مشتركًا في قيمة الذرة، لذلك لا يُعاد تصيير المكوّن مطلقًا عند تغيّر الذرة.

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

لن يُعاد تصيير مكوّن يستدعي useSetAtom(countAtom) لزيادة عدّاد عند تغيّر countAtom، لأنه لا يملك اشتراكًا في القيمة. يُعاد تصيير المكوّن الذي يعرض العدد فقط.

هذا تحسين بسيط لكنه قوي: افصلوا بين الكتّاب والقرّاء لمنع عمليات إعادة التصيير المتسلسلة.

استوردوا atomWithStorage من jotai/utils. استخدموه تمامًا مثل atom()، لكن مرّروا مفتاح تخزين كوسيط أول: atomWithStorage('theme', 'light'). تزامن الذرة تلقائيًا مع localStorage.

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

يمكن تمرير الرمز RESET من jotai/utils إلى setter الخاصة بذرة atomWithStorage: setter(RESET). يؤدي ذلك إلى مسح الإدخال من localStorage وإعادة الذرة إلى قيمتها الأولية.

يفيد هذا في إجراءات تسجيل الخروج أو أزرار «إعادة التعيين إلى الإعدادات الافتراضية» في صفحات الإعدادات.

تنشئ atomFamily من jotai/utils مصنعًا يعيد ذرة مرتبطة بمعامل. فعلى سبيل المثال، تنشئ atomFamily(id => atom(null)) ذرة منفصلة لكل id فريد يُمرَّر إليها.

يُعد هذا مثاليًا للحالة الخاصة بكل عنصر، مثل selectedAtom(itemId) أو expandedAtom(rowId)، من دون إدارة ذرة واحدة كبيرة على شكل خريطة.

قد تنمو عائلات الذرات بلا حدود إذا تراكمت المعرّفات. استخدموا atomFamily.setShouldRemove((createdAt, param) => ...) لتعريف شرط تنظيف تستدعيه Jotai عند تحديد أعضاء العائلة القديمة التي ينبغي طردها.

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

توفر الحزمة jotai-devtools لوحة مرئية تعرض جميع الذرات النشطة وقيمها الحالية. ثبّتوها، وغلّفوا تطبيقكم بـ DevTools، وافحصوا حالة الذرات في الوقت الفعلي.

يُسجَّل كل تحديث للذرة مع القيمة السابقة والتالية، مما يجعل تصحيح تفاعلات الذرات المعقدة مباشرًا.

في قائمة كبيرة، يمكن لمكوّن ListContainer استخدام useSetAtom(selectedIdAtom) لتحديث التحديد من دون الاشتراك في selectedIdAtom. لا تُعاد تصيير سوى مكوّنات ListItem الفردية التي تستدعي useAtomValue(selectedIdAtom) عند تغيّر التحديد.

يتوسع هذا النمط جيدًا: فإضافة آلاف عناصر القائمة لا تؤدي إلى إبطاء تحديثات التحديد.

اختاروا الخطاف الذي يطابق حاجة المكوّن: استخدموا useAtomValue للعرض الخالص، وuseSetAtom للإجراءات الخالصة، وuseAtom عندما تحتاجون إلى كليهما. يجعل تصميم واجهة برمجة التطبيقات المقصود هذا مسؤولية المكوّن واضحة من النظرة الأولى.

يستخدم مكوّن حقل النموذج عادةً useAtom، ويستخدم زر الإرسال useSetAtom، بينما تستخدم التسمية التي تعرض عددًا useAtomValue.

ما الميزة الأساسية لاستخدام useSetAtom بدلًا من useAtom؟

يوفر useAtom القيمة وsetter معًا؛ ويوفر useAtomValue القيمة فقط، أي اشتراكات القراءة؛ بينما يوفر useSetAtom setter فقط، ولا يؤدي تغيّر القيمة إلى إعادة التصيير. يحفظ atomWithStorage الحالة في localStorage مع دعم RESET، وتنشئ atomFamily ذرات مرتبطة بكل معامل للقوائم الديناميكية.

يؤدي اختيار الخطاف المناسب إلى تقليل عمليات إعادة التصيير غير الضرورية وتوضيح مقصد المكوّن.