React: [الألياف] تحقق من طلب requestAnimationFrame عندما يكون رد الفعل مطلوبًا على الخادم

تم إنشاؤها على ٣ مارس ٢٠١٧  ·  5تعليقات  ·  مصدر: facebook/react

هل تريد طلب ميزة أو الإبلاغ عن خطأ ؟
علة العش

ما هو السلوك الحالي؟
عند إجراء تصيير من جانب الخادم باستخدام React ، فإن طلب react-dom (الذي يتطلب ReactDOMFrameScheduling.js بشكل انتقالي) يطرح استثناءً لأن rAF غير معرّف.

Invariant Violation: React depends on requestAnimationFrame. Make sure that you load a polyfill in older browsers.
    at invariant (app/node_modules/fbjs/lib/invariant.js:44:15)
    at Object.<anonymous> (app/node_modules/react-dom/lib/ReactDOMFrameScheduling.js:30:3)

يمكن أن يحدث هذا إذا كان لديك مكون عالمي يحتوي على عمليات استيراد عالية المستوى من مكتبات جانب العميل ، مثل react-router-scroll ، والتي تتطلب react-dom بدلاً من react-dom/server .

ما هو السلوك المتوقع؟
أتوقع عدم تلقي هذا الخطأ ما لم يتم استدعاء requestAnimationFrame بالفعل. مثال: تحقق بتكاسل من rAF وحدد rIC.

ما إصدارات React وأي متصفح / نظام تشغيل متأثر بهذه المشكلة؟
تفاعل 16.0.0-alpha.3 على Node 7.7.1. بدأ هذا يحدث في alpha 3 ، التي شحنت ومكنت الألياف.

Bug

التعليق الأكثر فائدة

الحل الذي يحقق سلوكي المتوقع هو أن يقوم كل مستهلك لـ React بتعريف قليل من التعبئة في ملف تم استيراده قبل الآخرين ولكني أتوقع أن يواجه العديد من الأشخاص هذه المشكلة. هذا ما يبدو عليه:

global.window = global;
window.addEventListener = () => {};
window.requestAnimationFrame = () => {
  throw new Error('requestAnimationFrame is not supported in Node');
};

ال 5 كومينتر

الحل الذي يحقق سلوكي المتوقع هو أن يقوم كل مستهلك لـ React بتعريف قليل من التعبئة في ملف تم استيراده قبل الآخرين ولكني أتوقع أن يواجه العديد من الأشخاص هذه المشكلة. هذا ما يبدو عليه:

global.window = global;
window.addEventListener = () => {};
window.requestAnimationFrame = () => {
  throw new Error('requestAnimationFrame is not supported in Node');
};

يمكننا إصلاح هذا عن طريق التهيئة البطيئة لـ polyfill rAF ، ولكن الآن بعد أن أفكر في الأمر ، يبدو من المؤسف أن مجرد استيراد findDOMNode (وهو ما تفعله المكونات على الأرجح) يؤدي إلى تشغيل كود init المصلح بالكامل .

gaearon لا ينبغي أن يكون قد وقع في اختبار الوحدة

أيضًا ، والأهم من ذلك ، ألا يتطلب الأمر react-dom وتشغيل findDOMNode على الخادم نمطًا مضادًا ، وأن المكونات يجب أن تتجنبها في الخطافات التي تعمل على الخادم؟

أيضًا ، والأهم من ذلك ، ألا يتطلب إجراء رد فعل وتشغيل findDOMNode على الخادم نمطًا مضادًا ، ويجب أن تتجنبها المكونات في الخطافات التي تعمل على الخادم؟

لا يجب تشغيله على الخادم ، لكن استيراده جيد. وإلا كيف تكتب مكونًا يستخدم findDOMNode على العميل ولكنه لا يزال يعمل على الخادم؟

لا ينبغي أن يكون قد تم القبض عليه في اختبار الوحدة

لا ، لم يكتشف الاختبار هذا لأننا أنشأنا غلافًا متعدد الحشو عالميًا لسلاح الجو الملكي كجزء من بيئة الاختبار لدينا.

تحرير: العلاقات العامة هي فقط للتوضيح. فقط قمت بإجراء اختبارات الوحدة. لا linting وأجمل تشغيل حتى الآن.

فتح العلاقات العامة لوضع الفكرة في الكود.

قمت بنقل الشيك لـ rAF داخل ReactFiberScheduler

لكن الآن ، فقدت القدرة على الرمي إذا لم يتم تعبئة rAF . هل هذا هو المكان المناسب للفحص البطيء الذي ذكرته؟

هل كانت هذه الصفحة مفيدة؟
0 / 5 - 0 التقييمات