في مارس 2022 ، أعلن فريق React عن الإصدار الرسمي لـ React 18. جاء هذا الإصدار مع مجموعة من الميزات الجديدة الموجهة لتحسين الأداء ، بناءً على مفهوم "العرض المتزامن". تتمثل الفكرة وراء العرض المتزامن في جعل عملية العرض إلى DOM قابلة للمقاطعة.

من بين الميزات الجديدة خمسة خطافات: useId ، و useTransition ، و useDdedValue ، و useSyncExternalStore ، و useInsertionEffect.

رد الفعل useTransition Hook

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

مكون SearchPage

يقوم هذا البرنامج البسيط بتقليد محرك بحث يقوم بتحديث حالتين — حقل إدخال وبعض نتائج البحث.

يستورد {useState} من "تتفاعل"؛
وظيفةبحثالصفحة() {
 const [input، setInput] = useState ("")
مقدار ثابت [قائمة، setList] = useState ([]) ،
مقدار ثابت listSize = 30000


وظيفةالتعامل مع التغيير(ه) {
ضبط الإدخال(ه.استهداف.القيمة);
مقدار ثابت listItems = [] ،







instagram viewer



إلى عن على (يترك أنا = 0; أنا قائمة المواد.يدفع(ه.استهداف.القيمة);
 }


setList (listItems) ؛
 }


إرجاع (
<شعبة>
<ضع الكلمة المناسبة>ابحث في شبكة الانترنت: </label>
<نوع الإدخال ="نص" القيمة = {input} onChange = {handleChange} />
{قائمة.map ((item، index) => {
 إرجاع <مفتاح div = {index}>{العنصر}</div>
 })}
</div>
 );
}
يصدّرإفتراضي بحثالصفحة ؛

مكون التطبيق المحدث

يستورد بحثالصفحة من "./Components/SearchPage" ؛
وظيفةتطبيق() {
إرجاع (
<شعبة>
< صفحة البحث />
</div>
 );
}
يصدّرإفتراضي تطبيق؛

يعرض الكود أعلاه تطبيق React بحقل إدخال:

عندما تبدأ في كتابة الأحرف في الحقل ، ستظهر 30000 نسخة من النص المكتوب أدناه:

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

إذا كان العرض التوضيحي يعمل ببطء شديد أو بسرعة كبيرة جدًا بالنسبة لك ، فحاول تعديل ملف قائمة الحجم القيمة وفقًا لذلك.

يتيح لك إدخال خطاف useTransition في التطبيق إعطاء الأولوية لتحديث حالة واحدة على الأخرى.

استخدام خطاف useTransition

يستورد {useState، useTransition} من "تتفاعل"؛
وظيفةبحثالصفحة() {
مقدار ثابت [isPending، startTransition] = useTransition () ،
 const [input، setInput] = useState ("")
مقدار ثابت [قائمة، setList] = useState ([]) ،


مقدار ثابت listSize = 30000


وظيفةالتعامل مع التغيير(ه) {
ضبط الإدخال(ه.استهداف.القيمة);
 startTransition (() => {
مقدار ثابت listItems = [] ،


إلى عن على (يترك أنا = 0; أنا قائمة المواد.يدفع(ه.استهداف.القيمة);
 }


setList (listItems) ؛
 });
 }


إرجاع (
<شعبة>
<ضع الكلمة المناسبة>ابحث في شبكة الانترنت: </label>
<نوع الإدخال ="نص" القيمة = {input} onChange = {handleChange} />


{معلق؟ "... تحميل النتائج": list.map ((item، index) => {
 إرجاع <مفتاح div = {index}>{العنصر}</div>
 })}
</div>
 );
}
يصدّرإفتراضي بحثالصفحة ؛

تحديث الخاص بك بحثالصفحة المكون مع الكود أعلاه يعطي الأولوية لحقل الإدخال على "منطقة نتيجة البحث". هذا التغيير البسيط له تأثير واضح: يجب أن تبدأ في رؤية النص الذي تكتبه في حقل الإدخال على الفور. سيظل هناك تأخير طفيف في "منطقة نتائج البحث" فقط. هذا يرجع إلى بدء الانتقالواجهة برمجة التطبيقات (API) من خطاف useTransition.

يستخدم الرمز الذي يعرض نتائج البحث إلى واجهة المستخدم الآن الامتداد بدء الانتقال API. يسمح هذا لحقل الإدخال بمقاطعة تحديث حالة نتائج البحث. عندما قيد الانتظار () تعرض الوظيفة "... تحميل نتيجة" تشير إلى حدوث انتقال (من حالة إلى أخرى).

رد فعل useDef المؤجل ربط القيمة

يسمح لك الخطاف useDefirmedValue بتأجيل إعادة عرض تحديث حالة غير مطلوب. مثل خطاف useTransition ، فإن خطاف useDefirmedValue عبارة عن ربط التزامن. يسمح الخطاف useDefirmedValue للحالة بالحفاظ على قيمتها الأصلية أثناء انتقالها.

مكون SearchPage مع ربط useDefirmedValue ()

يستورد {useState، useTransition، useDefirmedValue} من "تتفاعل"؛
وظيفةبحثالصفحة() {


مقدار ثابت [، startTransition] = useTransition () ،
 const [input، setInput] = useState ("")
مقدار ثابت [قائمة، setList] = useState ([]) ،


مقدار ثابت listSize = 30000


وظيفةالتعامل مع التغيير(ه) {
ضبط الإدخال(ه.استهداف.القيمة);
 startTransition (() => {
مقدار ثابت listItems = [] ،


إلى عن على (يترك أنا = 0; أنا قائمة المواد.يدفع(ه.استهداف.القيمة);
 }


setList (listItems) ؛
 });
 }
مقدار ثابت مؤجل القيمة = useDefirmedValue (إدخال) ،
إرجاع (
<شعبة>
<ضع الكلمة المناسبة>ابحث في شبكة الانترنت: </label>
<نوع الإدخال ="نص" القيمة = {input} onChange = {handleChange} />


{قائمة.map ((item، index) => {
 إرجاع <مفتاح div = {index} المدخلات = {مؤجل القيمة} >{العنصر}</div>
 })}
</div>
 );
}
يصدّرإفتراضي بحثالصفحة ؛

في الكود أعلاه سترى أن ملف قيد الانتظار () الوظيفة لم تعد موجودة. هذا لأن ملف مؤجلة القيمة المتغير من الخطاف useDefirmedValue يستبدل قيد الانتظار () تعمل أثناء انتقال الحالة. بدلاً من تحديث قائمة نتائج البحث عند كتابة حرف جديد ، ستحتفظ بقيمها القديمة حتى يقوم التطبيق بتحديث الحالة.

رد فعل الخطاف useSyncExternalStore

على عكس الخطاف useTransition و useDefirmedValue اللذان يعملان مع كود التطبيق ، فإن useSyncExternalStore يعمل مع المكتبات. يسمح لتطبيق React الخاص بك بالاشتراك في البيانات وقراءتها من المكتبات الخارجية. يستخدم الخطاف useSyncExternalStore التعريف التالي:

مقدار ثابت state = useSyncExternalStore (Subscribe، getSnapshot [، getServerSnapshot]) ؛

يحتوي هذا التوقيع على ما يلي:

  • حالة: قيمة مخزن البيانات التي ترجعها أداة ربط الخطاف useSyncExternalStore.
  • الإشتراك: يسجل رد الاتصال عندما يتغير مخزن البيانات.
  • getSnapshot: إرجاع القيمة الحالية لمخزن البيانات.
  • getServerSnapshot: إرجاع اللقطة المستخدمة أثناء عرض الخادم.

باستخدام useSyncExternalStore ، يمكنك الاشتراك في مخزن بيانات كامل أو حقل معين داخل مخزن بيانات.

رد فعل useInsertionEffect Hook

خطاف useInsertionEffect هو خطاف React جديد آخر يعمل مع المكتبات. ومع ذلك ، بدلاً من تخزين البيانات ، يعمل الخطاف useInsertionEffect مع مكتبات CSS-in-JS. يعالج هذا الخطاف مشكلات أداء عرض النمط. يقوم بتصميم شكل DOM قبل قراءة التخطيط في خطاف useLayoutEffect.

رد الفعل useId هوك

يمكنك استخدام الخطاف useId في المواقف التي تتطلب معرفات فريدة (باستثناء المفاتيح الموجودة في القائمة). والغرض الرئيسي منه هو إنشاء معرفات تظل فريدة عبر العميل والخادم ، وتجنب خطأ عدم تطابق ترطيب خادم React. يستخدم الخطاف useId التصريح التالي:

مقدار ثابت معرف = معرف الاستخدام ()

في الإعلان هوية شخصية هي سلسلة فريدة تتضمن الامتداد : رمز. بعد الإعلان ، يمكنك تمرير هوية شخصية متغير مباشرة إلى العنصر (العناصر) التي تحتاجها.

ما القيمة التي تضيفها هذه الخطافات الجديدة للتفاعل؟

الخطافان useTransition و useDefirmedValue هما خطافان للتعليمات البرمجية للتطبيق. من خلال تقديم التزامن ، يقومون بتحسين أداء التطبيقات. يعالج خطاف useId خطأ عدم تطابق الترطيب من خلال إنشاء معرفات فريدة عبر العميل والخادم.

تعمل الخطافات useSyncExternalStore و useInsertionEffect مع المكتبات الخارجية لتسهيل عرض التزامن. يعمل الخطاف useInsertionEffect مع مكتبات CSS-in-JS. يعمل الخطاف useSyncExternalStore مع مكتبات تخزين البيانات مثل Redux store.

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