دعونا نقع في حب React Fiber

TLDR ، React Fiber هو تغيير داخلي في المحرك يسمح لـ React بكسر حدود مكدس الاستدعاءات. يتيح إنشائه لـ React إيقاف العمل مؤقتًا / بدء عرضه حسب الرغبة. في النهاية ، سيتمكن مستخدمو React من التلميح إلى "أولوية" العمل.

حاليًا ، لا يمكننا التفاعل معها بشكل مباشر ، فلماذا نهتم بها؟ لأنه رائع حقًا!

كانت React قبل Fiber تشبه العمل في شركة سريعة الخطى بدون بوابة.

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

إذا كنا نستخدم git ، فسنكون قادرين على إلزام عملنا بفرع ، والتحول إلى فرع إصلاح عاجل سريع.

باستخدام Fiber ، يمكن لـ React التوقف مؤقتًا واستئناف العمل كما تشاء لبدء العمل على الأمور المهمة في أسرع وقت ممكن! ؟

رد الفعل الداخلي باختصار؟

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

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

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

قد يعني هذا تحديث سمة فئة واحدة ، أو قد يعني هدم DOM بالكامل. هذه مصالحة.

قبل فايبر ، كان هذا هو. تم وضع العمل ، وبدأ العارض المختار في العمل. حتى لو كان المتصفح بطيئًا ، أو كان المستخدم يكتب ، أو كان الكوكب على وشك الانفجار ، فلن يتوقف قطار العرض. ؟

كيف يعمل (على مستوى عال)؟

باستخدام Fiber ، توجد الآن مستويات مختلفة من الأولوية للتحديثات. يحظى تحديث إدخال يكتبه المستخدم بأولوية أعلى من القائمة التي تحتوي على آلاف المكونات.

تقوم الألياف بتقسيم حساب الشجرة إلى وحدات عمل يمكنها "الالتزام" بها في أي وقت. إذن ما هي وحدة العمل؟ إنها ببساطة عقدة في شجرة المكونات الخاصة بك!

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

ومع ذلك ، أود التركيز على تلك النقطة الأولى قليلاً. ستبتعد React عن بعض خطاطيف دورة الحياة القديمة (لكنها لا تزال تدعمها!) وتضيف بعضًا منها جديدة! ؟

componentWillMount، componentWillUpdate، componentWillReceiveProps، ويمكن الآن اطلاق النار عدة مرات. لا يجب أن تحدث آثارًا جانبية هنا.

الآن ، تريد إطلاق تأثيرات جانبية في خطافات دورة الحياة التي ستطلق مرة واحدة فقط: componentDidMountوcomponentDidUpdate

للتعويض عن الكثير من حالات الاستخدام التي componentWillReceiveProps تمت تغطيتها ، سوف نتلقى خطافين جديدين.

  1. getDerivedStateFromProps التي لا تملك حق الوصول إلى الخاصيات السابقة أو مثيل المكون ، ولكنها تسمح لك بمزامنة الحالة مع الدعائم الخاصة بك.
  2. getSnapshotBeforeUpdateيتيح لك الوصول إلى DOM قبل تحديثه. القيمة التي ترجعها قابلة للاستخدام فيها componentDidUpdate.
بدءًا من React 16.4 ، يتم الآن تنشيط getDerivedStateFromProps دائمًا قبل طريقة العرض. ليس فقط عند تحديث الدعائم!

باختصار ، يسمح Fiber لـ React بضبط العرض للتأكد من أن التحديثات الأكثر أهمية تحدث في أسرع وقت ممكن ، وكل ذلك مقابل تكلفة خفيفة لبعض أدوات ربط دورة الحياة ، وجالونات من Facebook dev blood. ؟

إذا كانت لديك أي أسئلة أو كنت تبحث عن إرشاد فردي في React ، فلا تتردد في إرسال تغريدات لي على yurkaninryan في أي وقت!

إذا كنت تحب أسلوبي في الكتابة ، فإليك بعض المقالات الأخرى التي قمت بها.

حظًا سعيدًا وترميزًا سعيدًا! ؟؟