تعلم React 19: الدليل الكامل لتطبيقات الويب الحديثة/

...

/

بناء ردود الفعل الفورية باستخدام useOptimistic

بناء ردود الفعل الفورية باستخدام useOptimistic

استخدم useOptimistic في React 19 لإظهار تحديثات واجهة المستخدم الفورية أثناء وجود إجراء غير متزامن قيد التنفيذ، ثم التوفيق مع النتيجة الحقيقية.

سنغطي ما يلي...

تُبقي الواجهة سريعة الاستجابة المستخدمين مُتفاعلين. يجب أن يروا أفعالهم تُنعكس فورًا، دون انتظار اكتمال عمليات الخلفية. عادةً، كنا نُحدّث الحالة فقط بعد استجابة خادم . يُقدّم React 19useOptimistic الخطاف ، الذي يسمح لنا بتحديث واجهة المستخدم أولاً بشكل متفائل - إظهار ردود الفعل الفورية - ثم دمج النتيجة الحقيقية عند وصولها، أو التراجع بشكل سلس إذا فشلت العملية.

المفهوم: ماذاuseOptimistic يفعل

useOptimistic يتيح لنا استخلاص حالة متفائلة من حالتنا الأساسية أثناء انتظار إجراء ما.

const [optimisticValue, addOptimisticValue] = useOptimistic(
  baseValue,
  (current, pendingUpdate) => /* return new optimistic state */
);

  • baseValue هو مصدر الحقيقة لدينا (على سبيل المثال، التعليقات من خادم أو الحالة الأصلية).

  • optimisticValue هو ما نقدمه على الفور.

  • addOptimisticValue(update) يطبق تغييرًا مؤقتًا (على سبيل المثال، إضافة تعليق معلق).

  • عندما يتم حل إجراءنا غير المتزامن، نقوم بتحديث الحالة الأساسية ؛ يعيد React استخلاص العرض المتفائل من القاعدة الجديدة.

يوضح الرسم التوضيحي التالي تدفقًا إيجابيًا لواجهة المستخدم. عندما يُرسل المستخدم تعليقًا، يظهر فورًا في حالة "معلق" مؤقتة، مما يُحسّن ...