الناس مثلي الذين يكافحون من أجل مواقع عالية الأداء غالباً ما يقضون الكثير من الوقت في هذا الأمر. لذا ، سأحل الآن مشكلة موارد الويب منخفضة السرعة التي تمت كتابتها في React ، إلى الأبد. وهي أقترح أن يتوقف كل من يقرأ هذا عن استخدام React اليوم.
مؤلف المادة ، التي ننشر ترجمتها اليوم ، بالطبع ، نكت. سنتحدث هنا عن كيفية تحسين أداء تطبيقات React. بالمناسبة ، قبل أن تبدأ ، دعونا نفكر في سبب الحاجة إلى تحسين موقع الويب بشكل عام. ربما يمكننا القول أنه مطلوب حتى يتم استخدام الموقع من قبل عدد أكبر من الأشخاص مقارنةً قبل التحسين.
مقدمة
كيفية تحسين الموقع؟ كيف يمكنك تقييم فوائد التحسين لمستخدمي الموقع؟ ولماذا تحتاج إلى التفكير في مثل هذه المؤشرات؟
سنحاول الإجابة على هذه الأسئلة من خلال النظر في أسهل طريقة لإنشاء تطبيقات React - باستخدام أداة
إنشاء رد فعل (CRA). يحتوي مشروع جديد تم إنشاؤه باستخدام هذه الأداة على التبعيات التالية:
- مكتبة
react الرئيسية ، والتي تتيح لك العمل مع مكونات React: 2.5 كيلو بايت. - مكتبة
react-dom ، والتي تتيح عرض المكونات على الصفحة ، وتحويلها إلى هياكل مناسبة للإدراج في شجرة DOM: 30.7 كيلو بايت. - كمية صغيرة من التعليمات البرمجية ، والتي تتضمن قالب المكون الأول: حوالي 3 كيلو بايت.
يتم الحصول على هذه البيانات ل React 16.6.3.
لمعرفة المدة التي يستغرقها تنزيل تطبيق CRA جديد على هاتف Moto G4 الخاص بك ، يمكنك استخدام خدمة
WebPageTest .
وقت تحميل الموقع على Moto G4 باستخدام شبكات مختلفةهذا التطبيق ، بصيغة مختلفة من "Hello، World" ، يتم استضافته على استضافة Firebase ، ويجري التحقيق في تحميله في متصفح Chrome باستخدام ثلاثة أنواع من الاتصالات:
- 4G (9 ميغابت في الثانية)
- 3G (1.6 ميغابت في الثانية)
- اتصال 3G بطيء (400 كيلو بايت في الثانية)
هنا تحتاج إلى النظر في تأخير الشبكة.
لماذا استخدمت Moto G4 للتجربة؟ هذا هاتف بسيط غير مكلف ، على غرار تلك الهواتف التي يستخدمها كثير من الناس في البلدان النامية ، في شكل أجهزة أساسية. على شبكة 4G ، يتم تحميل التطبيق في 2 ثانية. في شبكة 3G البطيئة ، استغرق الأمر أكثر من 4 ثوان للوصول إلى الصفحة عبر الإنترنت.
على الرغم من أن هذه المقاييس مهمة للغاية ، إلا أنها ليست مفيدة بشكل خاص إذا كنت لا تعرف هوية المستخدمين لديك. ما تعرفه بأنه "بطيء" قد يكون مختلفًا تمامًا عما يعتبره أنا أو أي شخص آخر "بطيئًا". وقد يتم تشويه إدراكك للتحميل "السريع" للموقع من خلال الجهاز واتصال الشبكة الذي تستخدمه. إذا قمت بتضمين كمبيوتر مكتبي متصل بالإنترنت عبر اتصال سلكي في هذه التجربة ، يمكنك معرفة مدى الاختلاف بين تحميل "سريع" و "بطيء" لموقع ما.
وقت تحميل الموقع على كمبيوتر سطح المكتب و Moto G4من أجل تحسين أداء تطبيقات React ، التي تم إنشاؤها باستخدام مكتبة React ، كما يقولون ، تم إلغاء تحديد تحسينات React DOM من خارج الصندوق والتي تهدف إلى تبسيط بعض الأشياء. لذلك ، يحتوي نظام الأحداث على العديد من polyfills ، والتي ، بالنسبة للعديد من المتصفحات الجديدة ، ليست ضرورية ، ويدرس فريق التطوير خيارات لإزالتها أو تبسيطها ، إن أمكن. يمكنك مشاهدته
هنا .
هل يمكنني قياس المستوى الحالي لأداء الموقع؟
يمكن أن يحتوي تطبيق React النموذجي على العديد من مكونات ومكتبات الجهات الخارجية. هذا يعني أن أداء تطبيق "Hello، World" لا يوفر لنا معلومات قيمة بشكل خاص حول كيفية تحميل التطبيقات الحقيقية. هل هناك طريقة لمعرفة مدى أداء معظم المواقع المبنية باستخدام بعض التكنولوجيا (مثل React)؟
قد يساعدنا مصدر
HTTP Archive في الإجابة على هذا السؤال. هذا نظام أساسي مفتوح المصدر يركز على مراقبة كيفية بناء الويب. يتم ذلك عن طريق الزحف الشهري لملايين المواقع ، وتحليلها باستخدام WebPageTest وتسجيل المعلومات عنها. تتضمن هذه المعلومات عدد الاستعلامات والمقاييس المتعلقة بتحميل البيانات وأحجام البيانات المرسلة والمؤشرات الأخرى.
إليك أداة أخرى مثيرة للاهتمام - امتداد لمتصفح Chrome يسمى
Library-Detector-for-Chrome . تتيح لك معرفة مكتبات JavaScript المستخدمة على الصفحة. لقد تم
تضمينه مؤخرًا كأداة لتدقيق الصفحات في المنارة. يشير هذا إلى أنه يمكن الحصول على المعلومات التي يوفرها هذا الملحق للعديد من المواقع التي يتم تخزين معلوماتها في أرشيف HTTP. يمكن أن يساعد ذلك أولئك الذين يريدون تحليل نتائج اختبار الآلاف من المواقع التي تستخدم مكتبة JavaScript محددة (آلية تحديد React موجودة
هنا ).
مجموعة بيانات HTTP Archive الكاملة متاحة للجمهور ويمكن العثور عليها على
BigQuery . بعد البحث في 140،000 موقع باستخدام
2019_01_01 بيئة متنقلة محاكاة اصطناعية (مجموعة البيانات
2019_01_01 ) ، تمكنا من معرفة ما يلي:
- كان متوسط مؤشر الطلاء الأول ذي معنى (أول عرض مهم ، ووقت رسم العناصر المهمة) 6.9 ثانية.
- كان متوسط مؤشر الوقت إلى التفاعل (وقت التفاعل ، وقت تحميل عناصر التفاعل) 19.7 ثانية.
يمكنك
استكشاف هذه البيانات بنفسك.
يستغرق المستخدم ما يقرب من 20 ثانية لبدء التفاعل مع الموقع. وهذا ، بشكل عام ، يحدث ، إذا جاز التعبير ، هنا والآن ، على الرغم من أنه قد يبدو غير معقول. يمكن ملاحظة ذلك على المواقع الكبيرة عند العمل معهم من أجهزة ضعيفة على خطوط اتصال بطيئة. بالإضافة إلى ذلك ، أود الآن التعبير عن عدة أسباب وراء ضرورة مراعاة هذه البيانات بدرجة من الشك.
- هناك العديد من العوامل التي تؤثر على أداء الموقع. فيما بينها - مقدار شفرة جافا سكريبت المرسلة إلى المستخدم ، وعدد الصور والمواد الأخرى المعروضة على الصفحة ، وهلم جرا. ستقوم بشكل غير صحيح بمقارنة أداء أي من المواقع التي تعتمد على React مع أداء صفحة تحمل اسم "Hello، World" إذا لم تؤخذ العوامل الأخرى في الاعتبار.
- إذا حاولت الحصول على البيانات عن طريق استبدال اسم بعض المكتبات الأخرى في طلب React ، فستحصل على أرقام مشابهة جدًا.
من أجل الحصول على بيانات دقيقة حول أي نوع من الأداء الموجود في المواقع الواقعية باستخدام مكتبة معيّنة ، يجب القيام بالكثير من العمل.
نمو شفرة جافا سكريبت
ترتبط المشكلة الشائعة لمواقع الويب الحديثة ، غير المرتبطة بمكتبة معينة ، بكمية جافا سكريبت البرمجية التي عادة ما يتعين على العميل تحميلها عند التصفح. يحتوي أرشيف HTTP بالفعل على حساب جيد لهذا. باختصار ، إليك ما تبدو عليه القيم المتوسطة لوحدات جافا سكريبت التي تم تنزيلها من مواقع الويب في سنوات مختلفة:
- 74.7 كيلوبايت - صفحات الويب للجوال ، 15 ديسمبر 2011.
- 384.4 كيلوبايت - صفحات الويب للجوال ، 15 ديسمبر 2018.
يجب أن يؤخذ في الاعتبار أنه تم الحصول على هذه البيانات بعد معالجة ملايين الصفحات. ربما هناك الآلاف من المواقع غير التقليدية التي تشوه هذا المؤشر. هذه هي فكرة قابلة للحياة. لذلك ، سنحاول معرفة كيف يبحث هذا المؤشر عن أول 10000 موقع من ترتيب Alexa:
- 381.5 كيلوبايت - صفحات الويب للجوال ، 15 ديسمبر 2018 (هنا هو الطلب ).
كل هذا يسمح لنا أن نستنتج أنه يتم إنشاء مواقع الويب هذه الأيام والتي تحتوي على كود JS أكثر من المواقع التي تم إنشاؤها قبل عدة سنوات. هذه ملاحظة مهمة. أصبحت المواقع أكبر ، وأصبحت أكثر تفاعلية وتعقيدًا ، ويتزايد حجم كود JS لهذه المواقع تدريجياً كل عام. ربما تكون قد سمعت بالفعل بهذا ، ولكن كلما زاد رمز JavaScript الذي ترسله إلى المتصفح ، زاد الوقت المستغرق في تحليله وتجميعه وتنفيذه. هذا ، نتيجة لذلك ، يبطئ الموقع.
من المهم أن نلاحظ أن كل موقع فريد من نوعه ، وكذلك قاعدة المستخدمين لكل موقع. لا يواجه العديد من المطورين ، الذين تتضمن مواقعهم أكثر من 300 كيلوبايت من تعليمات JS البرمجية ، حقيقة أن معظم مستخدميهم يعانون من مشاكل في الأداء ، وهذا أمر طبيعي تمامًا. ومع ذلك ، إذا كنت قلقًا من أنه قد يكون من الصعب على المستخدمين عرض موقع React الخاص بك ، من أجل تقييم الوضع الحقيقي ، فمن الأفضل أن تبدأ بالتوصيف.
صفحة التعريف والتحليل
التنميط وتحليل تطبيقات React يمكن رؤيته من منظورين:
- أولاً ، يتعلق الأمر بتقييم أداء المكونات. يؤثر هذا على كيفية تفاعل المستخدمين مع الموقع. على سبيل المثال ، إذا تم عرض قائمة من خلال النقر على زر ، فيجب القيام بذلك بسرعة ، ولكن إذا تم إعادة تقديم مئات المكونات أثناء هذه العملية ، على الرغم من أنها ليست ضرورية ، فسيتم اعتبار هذه العملية بطيئة.
- ثانياً ، نحن نتحدث عن مدى سرعة تقديم الطلب إلى حالة صالحة للعمل. وهذا يعني ، كم من الوقت بعد بدء تحميل الموقع ، سيتمكن المستخدم من التفاعل معه. يُعد مقدار الكود الذي تم إرساله إلى المستخدم أثناء تحميل الصفحة الأولى من الموقع مثالًا على عامل يؤثر على سرعة بدء المستخدم في العمل مع التطبيق.
تقييم الأداء وتحسين المكون
دعونا نحاول أن نعبر في جملة واحدة عن معنى خوارزمية المصالحة React ، أو جوهر ما يسمى بـ "DOM الظاهري". سيبدو كما يلي: "يأخذ React خطوات للتمييز بين شجرة DOM الجديدة والشجرة القديمة من أجل فهم ما يجب تحديثه بالضبط في واجهة المستخدم عند تغيير البيانات الموجودة في المكون." يؤدي هذا إلى إنشاء حمل أقل بكثير على النظام من إعادة تقديم التطبيق بأكمله لكل تغيير في الحالة أو الخصائص (
هنا يمكنك أن تقرأ عن الفرق بين O (n
3 ) و O (n)).
إليكم مقال بقلم دان أبراموف ، حيث يمكنك العثور على توضيحات حول المصالحة.
حتى مع الأخذ في الاعتبار حقيقة أن هذه التحسينات مضمنة في الآليات الداخلية لـ React ، يمكن للمرء دائمًا أن يواجه مشكلة عندما يتم تقديم المكونات في التطبيق بشكل متكرر عندما لا يحدث هذا. في التطبيقات الصغيرة ، قد لا يكون هذا ملحوظًا ، لكنه قد يؤثر بشكل خطير على أداء التطبيقات التي تعرض مئات المكونات على صفحاتها.
يتم إعادة تقديم المكونات غير الضرورية لأسباب عديدة. على سبيل المثال ، قد لا تكون الوظائف التي تعمل داخل المكونات فعالة كما قد تكون ، أو ربما يتم إعادة رسم قائمة كاملة بالمكونات عند إضافة عنصر جديد واحد فقط إلى هذه القائمة. هناك أدوات يمكنك استخدامها لمعرفة الأشجار المكونة التي تم تقديمها لفترة طويلة جدًا. فيما بينها ، يمكن ملاحظة ما يلي:
- لوحة أدوات أدوات مطوري Chrome.
- React Developer Tool Profiler.
analysis تحليل الأداء باستخدام لوحة الأداء في Chrome Developer Tools
يستخدم React
واجهة برمجة تطبيقات توقيت المستخدم لقياس الوقت المستغرق في كل خطوة من دورة حياة المكون. يمكن جمع معلومات الأداء لتطبيقات React وتحليلها باستخدام أدوات مطوري Chrome. يتيح لك ذلك فهم مدى فعالية توصيل المكونات وعرضها على الصفحة وفصلها أثناء تفاعل المستخدم مع الصفحة أو عند إعادة تحميلها.
تحليل أداء المكونإليك بعض المواد الجيدة حول هذا الموضوع ، وهي مكرسة للبحث عن أداء التطبيقات المكتوبة باستخدام React 16 باستخدام أدوات مطوّر برامج Chrome.
لا يتم استخدام واجهة برمجة تطبيقات توقيت المستخدم إلا أثناء التطوير. في الإنتاج ، يتم إيقاف. في مثل هذه الظروف ، يمكن استخدام تطبيقات أسرع لهذه الآليات ، دون أن يكون لها تأثير خطير على الأداء. كانت الحاجة إلى مثل هذه الآليات التي أصبحت أحد أسباب تطوير أحدث API Profiler.
nal تحليل الأداء باستخدام التعريف من أدوات المطور React
مع إصدار مكتبة
react-dom 16.5 في أدوات المطور React ، يمكن استخدام لوحة جديدة تسمى Profiler. يسمح لك بتحليل أداء تجسيد المكونات. يتم ذلك باستخدام Profiler API ، الذي يجمع معلومات حول وقت تنفيذ العمليات لجميع المكونات التي يتم إعادة تقديمها.
تعد لوحة Profiler علامة تبويب مستقلة في
أدوات المطور React. هنا ، كما هو الحال مع شريط أدوات Chrome Developer Tools Tool ، يمكنك تسجيل معلومات حول إجراءات المستخدم وعمليات إعادة تحميل الصفحة من أجل جمع البيانات لتحليل أداء المكون.
بعد الانتهاء من جمع البيانات ، سيتم عرض ما يسمى "الرسم البياني الناري" ، مع توضيح الوقت اللازم لتقديم المكونات على الصفحة.
المشتعلة جدول المحللهنا يمكنك التبديل بين الالتزامات أو الحالات المختلفة ، عند إضافة أو حذف أو تحديث عقد DOM. يتيح لك ذلك الحصول على مزيد من المعلومات حول مقدار الوقت الذي تقضيه في العمليات المختلفة مع المكونات.
عرض معلومات الالتزام في منشئ ملفات التعريفتمثل لقطات الشاشة المعروضة هنا البيانات التي تم الحصول عليها نتيجة لتسجيل إجراءات المستخدم التي تم تنفيذها في تطبيق بسيط. يقوم التطبيق بتنزيل قائمة من مستودعات GitHub الشائعة عند النقر فوق زر. كما ترون ، هناك فقط التزامان:
- واحد لمؤشر التحميل ، والذي يتم عرضه أثناء تحميل قائمة العناصر.
- يمثل آخر لحظة اكتمال المكالمة إلى API ويتم عرض القائمة في DOM.
يوضح الشكل الموجود على الجانب الأيمن بيانات تعريف مفيدة تتضمن معلومات الالتزام أو بيانات المكونات ، مثل الخصائص والحالة.
البيانات الوصفيةعند العمل مع Profiler Profct ، يمكنك أيضًا عرض البيانات الأخرى التي تمثلها الرسوم البيانية المختلفة. يمكنك قراءة المزيد عن منشئ React في
هذا المنشور من مدونة React.
لتعقيد مثالنا قليلاً ، فكر في موقف مشابه ، لكننا سنقوم الآن بإجراء العديد من المكالمات إلى API لتنزيل مستودعات الاتجاه بلغات برمجة مختلفة (مثل Golang و JavaScript وما إلى ذلك). كما قد تتوقع ، مع هذا النهج ، لدينا المزيد من الالتزامات تحت تصرفنا.
زيادة عدد مرات التعقيد أثناء تعقيد مخطط العمل مع التطبيقتتميز العمليات اللاحقة بجداول زمنية أطول ، ولديها لون أصفر أكثر. هذا يعني أن الوقت اللازم لجميع المكونات لإكمال العرض يزداد كلما زاد حجم قائمة العناصر في الصفحة. ويرجع ذلك إلى حقيقة أن كل مكون في القائمة يخضع لإعادة العرض مع كل مكالمة جديدة إلى API. هذا يساعد على تحديد مشكلة يمكن حلها بسهولة. الحل هو أن العناصر الموجودة في القائمة لا تحتاج إلى تقديمها مرة أخرى عند إضافة عناصر جديدة إلى القائمة.
▍ تقليل عمليات إعادة تقديم المكونات غير الضرورية
هناك العديد من الطرق للتخلص من العمليات غير الضرورية لإعادة تقديم مكونات React ، أو على الأقل لتقليل عدد هذه العمليات. دعونا نفكر في بعضهم.
- يمكنك استخدام طريقة دورة حياة المكون من shouldComponentUpdate () :
shouldComponentUpdate(nextProps, nextState) { // true }
- يمكنك استخدام PureComponent لإنشاء مكونات تستند إلى الفصل:
import React, { PureComponent } from 'react'; class AvatarComponent extends PureComponent { }
- للمكونات الوظيفية ، يمكنك استخدام المذكرة :
import React, { memo } from 'react'; const AvatarComponent = memo(props => { });
- يمكنك حفظ محددات Redux (على سبيل المثال ، باستخدام إعادة تحديد ).
- يمكنك تحسين إخراج القوائم الطويلة جدًا باستخدام المحاكاة الافتراضية (على سبيل المثال ، باستخدام نافذة التفاعل ).
هنا وهناك - بعض مقاطع الفيديو المفيدة ، والتي تناقش استخدام Profact Profiler للعثور على الاختناقات في التطبيقات.
تقييم الأداء وتحسين التطبيق
بالإضافة إلى تحليل طفرات DOM وعمليات إعادة تقديم المكونات ، هناك ظواهر أخرى عالية المستوى تستحق الاستكشاف. لإجراء تقييم شامل لأداء الموقع ، يمكنك استخدام
Lighthouse .
هناك ثلاث طرق لاختبار صفحة ويب باستخدام Lighthouse:
- باستخدام واجهة سطر الأوامر Node.js.
- باستخدام ملحق Chrome.
- استخدم شريط الأدوات التدوين في أدوات مطوري Chrome.
إليكم شكل Lighthouse في لوحة Audits.
منارة على لوحة التدقيقلا تتطلب المنارة عادة الكثير من الوقت لجمع جميع البيانات التي يحتاجها من الصفحة وإجراء العديد من عمليات التحقق من هذه البيانات. بعد الانتهاء من هذه العمليات ، تعرض Lighthouse تقريرًا يتضمن معلومات موجزة.
لفهم أن تحميل صفحة في المستعرض ينطوي على تحميل الكثير من شفرة JavaScript ، وللتوصل إلى أنه يجب تقليل مقدار هذا الرمز ، يجب عليك الانتباه إلى العبارات التالية من التقرير:
- القضاء على تجسيد الموارد
- مدة تشغيل جافا سكريبت عالية جدًا
- تجنب حمولات الشبكة الهائلة
إذا أبلغت Lighthouse عن هذه المشكلات لأن الصفحة تستخدم حزمة JS كبيرة جدًا ، فإن أول شيء يستحق النظر فيه كطريقة لإصلاح المشكلة هو تقسيم الحزمة. والحقيقة هي أنه إذا كان يمكن تقسيم الشفرة إلى أجزاء ، بعضها ضروري فقط للعمل مع صفحات معينة من الموقع ، فلن يكون لدينا سبب لعدم استخدام هذه الفرصة.
separation فصل حزمة JS
تتمثل إحدى طرق تقسيم الشفرة إلى أجزاء في استخدام الواردات الديناميكية:
import('lodash.sortby') .then(module => module.default) .then(module => doSomethingCool(module))
قد يبدو بناء جملة الاستيراد بمثابة استدعاء دالة ، ولكنه يسمح لك باستيراد أي وحدة نمطية بشكل غير متزامن باستخدام آلية الوعود. في هذا المثال ، يتم استيراد طريقة
lodash أولاً من مكتبة
lodash ، ثم يتم
doSomethingCool() طريقة
doSomethingCool() .
في هذا المثال ، يحدث ما يلي:
- ينقر المستخدم على زر لفرز الأرقام الثلاثة.
lodash.sortby المستوردة.doSomethingCool() طريقة doSomethingCool() ، والتي تقوم بفرز الأرقام وعرضها في عقدة DOM الجديدة.
هذا مثال بسيط للغاية ، لأنه إذا احتاج شخص ما إلى فرز الأرقام على صفحة ويب ، فمن المحتمل أنه سيستخدم طريقة
Array.prototype.sort() . , , .
,
JavaScript TC39.
Chrome Safari ,
Webpack ,
Rollup Parcel .
React, , . —
React.lazy :
import React, { lazy } from 'react'; const AvatarComponent = lazy(() => import('./AvatarComponent'));
, , , .
Suspense , , «» .
React.lazy , , , :
import React, { lazy, Suspense } from 'react'; import LoadingComponent from './LoadingComponent'; const AvatarComponent = lazy(() => import('./AvatarComponent')); const PageComponent = () => ( <Suspense fallback={LoadingComponent}> <SomeComponent /> </Suspense> )
Suspense . React-, , , , React,
loadable-components .
import React from 'react'; import loadable from '@loadable/component' import LoadingComponent from './LoadingComponent'; const AvatarComponent = loadable(() => import('./AvatarComponent'), { LoadingComponent: () => LoadingComponent });
LoadingComponent loadable-component .
, ,
loadable-components , -
.
, . , , .
React , React
Suspense .
▍ , ?
,
react-loadable-visibility ,
loadable-components -API Intersection Observer. , .
import React from 'react'; import loadableVisibility from 'react-loadable-visibility/loadable-components' const AvatarComponent = loadableVisibility(() => import('./AvatarComponent'), { LoadingComponent: Loading, })
▍ ,
- — -, . - , , . , , , -, -, , .
Workbox — , -, . CRA 2.0 , ,
src/index.js . - .
import React from 'react'; //... // , // , // unregister() register(). , - // . // : http://bit.ly/CRA-PWA serviceWorker.unregister();
-
Workbox .
▍
- HTML-, , , . , , , , , JS-, .
, , DOM-, , , (,
hydrate() React). , , , , .
React 16, .
renderToString() HTML-,
renderToNodeStream() Readable- Node.
HTML- , . , , .
React , , ,
renderToStaticNodeStream .
▍ ,
- , , , , - , , . , , .
, , , . HTML- , .
,
react-snap ,
Puppeteer .
, .
▍ , CSS-in-JS
React-, , CSS-in-JS-
emotion styled-components . , , , , , . CSS-in-JS , , , . , , JavaScript- , , . , , , .
, ( )- , .
emotion styled-components . Readable- Node. Glamor
, .
, .
Preact-, ( ), CSS-in-JS — , , , , ,
astroturf . , , , , .
▍
«», , . , , .
, Lighthouse. , React-,
React A11y .
,
react-axe , , JSX-.
▍
? -, , ? , ?
,
- . «» . , — , .
create-react-app -:
{ "short_name": "React App", "name": "Create React App Sample", "icons": [ { "src": "favicon.ico", "sizes": "64x64 32x32 24x24 16x16", "type": "image/x-icon" } ], "start_url": ".", "display": "standalone", "theme_color": "#000000", "background_color": "#ffffff" }
miscellanea
, . , , . — . لماذا هذا هكذا؟ , , .
▍Atomic CSS
CSS- (Atomic CSS) , . , , :
<button class="bg-blue">Click Me</button>
padding :
<button class="bg-blue pa2">Click Me</button>
و هكذا.
class DOM, , , CSS-, . , .
Tachyons .
.
tachyon-components API, API
styled-components :
import styled from 'tachyons-components' const Button = styled('button')` bg-blue pa2 ` <Button>Click Me</Button>
, , CSS- «» , CSS-, , .
▍
, , . — :
import { useState } from 'react'; function AvatarComponent() { const [name, setName] = useState('Houssein'); return ( <React.Fragment> <div> <p>This is a picture of {name}</p> <img align="center" src="avatar.png" /> </div> <button onClick={() => setName('a banana')}> Fix name </button> </React.Fragment> ); }
:
, . , ,
recompose .
React Conf, .
, , JavaScript- .
, React , 1.5 ( ). , - , , , , , , , .
النتائج
, React-. , , :
- , :
- Performance Chrome.
- React.
- , ,
shouldComponentUpdate() . - , ,
PureComponent . React.memo .- Redux (,
reselect ). - (,
react-window ).
- Lighthouse.
- , :
- —
React.lazy . - —
loadable-components . - - , .
Workbox . - — (
renderToNodeStream renderToStaticNodeStream ). - ?
react-snap . - , CSS-in-JS.
- , .
React A11y react-axe . - - , , , .
, React, , :
« » . -, .
أعزائي القراء! React-?
