أفضل وأسرع وأقوى: المكونات ذات النمط v4

يرغب مؤلف المادة ، التي ننشر ترجمتها اليوم ، في تقديم النسخة التجريبية من مكتبة v4 للمكونات ذات النمط إلى مجتمع مطوري الويب. يقول ، متحدثًا باسم منشئي المكتبة ، أن المكونات ذات الأنماط تحتوي الآن على واجهة برمجة تطبيقات عالمية جديدة للعمل مع الأنماط والدعم الأصلي لخصائص as و ref . اتبعت المكتبة مسار رفض .extend ، وهي متوافقة مع StrictMode .extend وأصبحت أفضل وأسرع وأكثر قوة.

يتميز بمكونات على غرار v4

لتثبيت أحدث إصدار من المكونات ذات النمط ، استخدم هذا الأمر:

 npm install styled-components@beta 

يمكنك التعرف على إمكانات المكتبة ، والتحقق منها ، وإذا اتضح أن هناك حاجة إلى تحسين شيء ما ، فأخبر المطورين بذلك. هنا يمكنك العثور على تعليمات حول الترقية إلى إصدار جديد من المكتبة. فيما يلي سجل التغيير للمكونات المصممة v4.0.0-beta.0.

خذ بعين الاعتبار الميزات الرئيسية لهذا الإصدار من المكونات ذات النمط:

• تقليل الحجم وزيادة السرعة. تم تقليل حجم المكتبة من 16.1 كيلوبايت إلى أقل من 15 كيلوبايت (يعتمد حجمها النهائي على برنامج تجميعك واستخدام المكوّن الإضافي babel). زادت سرعة التركيب بنحو 25٪ ، وسرعة إعادة العرض - بنحو 7.5٪.
• الجديد createGlobalStyle API ، والذي هو بديل injectGlobal برمجة التطبيقات injectGlobal القديمة مع دعم إعادة التحميل والمواضيع الساخنة.
• دعم كخاصية ، بديل أكثر مرونة لـ .withComponent() .
  
• التخلص من Comp.extend مع دعم الترجمة التلقائية Comp.extend البرمجية إلى تنسيق موحد styled(Comp) .
• التوافق التام مع StrictMode React v16. هذا ، بالإضافة إلى ذلك ، يعني أن المطورين اضطروا إلى التخلي عن الدعم لـ React v15 والإصدارات القديمة الأخرى من React (على الرغم من أنه يمكن استخدام polyfill لتنظيم العمل مع المكونات ذات النمط v4 في React v15).
• دعم أصلي ref لأي مكونات منمقة ، وبفضل innerRef ، ليست هناك حاجة لاستخدام innerRef .

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

الأداء

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

يستمر العمل على أداء المكونات ذات النمط. بفضل التحسينات الداخلية المتعلقة بالعمل مع الذاكرة ، نظرًا لخصائص تنفيذ محرك JS وإعادة بناء الكود ، زادت سرعة التركيب للمكونات ذات النمط v4 لكل من أشجار المكونات العميقة والواسعة بنسبة 25٪ تقريبًا. تحديثات النمط الديناميكي أسرع بحوالي 7٪. فيما يلي مقارنة لأداء المكونات ذات النمط v3 و v4 ، بناءً على نتائج الاختبارات الثلاثة. يتعلق النوعان الأولان بدراسة أشجار المكونات المتصاعدة ، والثالث يتعلق بتحديث المكونات بأنماط ديناميكية.


مقارنة بين المكونات ذات التصميم V3 و V4

هذه النتائج ، التي تم الحصول عليها في بيئة معزولة ، تبدو مثيرة للإعجاب. ومع ذلك ، سيكون من المثير للاهتمام للغاية مقارنة المكونات ذات النمط v4 مع مكتبات النظم البيئية الأخرى CSS-in-JS ، على وجه الخصوص ، من حيث سرعة التركيب.


المكونات ذات النمط V4 ومقارنة أداء المكتبات الأخرى

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

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

واجهة برمجة تطبيقات التصميم العالمية الجديدة

لقد تم تطوير واجهة برمجة تطبيقات التصميم العالمية الجديدة لبعض الوقت. تحتوي واجهة برمجة التطبيقات القديمة ، injectGlobal ، على ثلاثة عيوب خطيرة: فهي لا تدعم التحديث الديناميكي وإعادة التحميل السريع والاستخدام السياقي للموضوعات.

يسعدنا الآن أن نقدم لك createGlobalStyle ، واجهة برمجة التطبيقات العالمية الجديدة للتصميم التي تدعم التحديث الديناميكي. إليك ما يبدو عليه العمل معه:

 import { createGlobalStyle } from "styled-components"; const GlobalStyle = createGlobalStyle` html {   color: red; } `; export default function App() { return (   <div>     <GlobalStyle />     This is my app!   </div> ); } 

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

 import { createGlobalStyle, ThemeProvider } from "styled-components"; //  ,       const GlobalStyle = createGlobalStyle` html {   background: ${p => p.backgroundColor}   color: red;   font-family: ${p => p.theme.fontFamily}; } `; export default function App() { return (   <ThemeProvider theme={{ fontFamily: "Helvetica Neue" }}>     <GlobalStyle backgroundColor="turquoise" />   </ThemeProvider> ); } 

رفض .extend و "طي" المكونات

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

ماذا يعني هذا لمستخدمي المكتبة؟ والحقيقة هي أن واجهة برمجة تطبيقات StyledComp.extend ظهرت في المكتبة للسماح ببعض التحسينات استنادًا إلى حقيقة أن المكونات القابلة للتوسيع كانت مكونات منمقة. بفضل العمل الداخلي على "الطي" التلقائي للمكونات ، عند استخدام styled(StyledComp) تطبيق نفس التحسينات التي تم تطبيقها بفضل StyledComp.extend تلقائيًا. وهذا يعني أن .extend مفيد بشكل خاص الآن ، مما سمح بالتخلي عن واجهة برمجة التطبيقات هذه. ونتيجة لذلك ، يمكن لمستخدمي المكتبة الآن كتابة كود أقل والحصول على فرصة عدم إضاعة الوقت في تطوير واجهة برمجة تطبيقات إضافية. نعتقد أن هذا جيد جدا.

خاصية متعددة الأشكال كما

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

 import styled from "styled-components" import { Link } from "react-router-dom" // <Component />   DOM  div const Component = styled.div` color: red; ` <Component>Hello World!</Component> //     ,      HTML-  ! <Component as="span">Hello World!</Component> <Component as={Link} to="home">Hello World!</Component> 

إذا قارنت ذلك .withComponent(something) ، فإن الأداة الجديدة تكون أكثر مرونة ، نظرًا لأنك لست بحاجة إلى وصف الاستبدال مقدمًا ، وبفضل آلية "الطي" الداخلية الجديدة ، لا يتم فقدان التصميم إذا تم تصميم المكون الأساسي - مكون!

 import styled from "styled-components" const RedColor = styled.div` color: red; ` const BlueBackgroundRedColor = styled(RedColor)` background: blue; ` <BlueBackgroundRedColor as="span">Hello!</BlueBackgroundRedColor> //       `span`   // <RedColor />,       // !! (.withComponent    ) 

كما ترون ، فإن الخاصية as مجرد شيء رائع ، مما يبسط إلى حد كبير عرض شفرة HTML الدلالية في أي مكان في التطبيق. ليس هناك ما يبرر "حساء" علامات <div> .

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

رد فعل v16 ومرجع

في عملية التحول إلى React.forwardRef API ، وجدنا ، من بين أمور أخرى ، أنه بفضل API React.forwardRef الجديد ، يمكننا التخلص من innerRef . لم نحب أبدًا هذه التقنية بشكل خاص ، حيث بدت وكأنها نوع من الاختراق غير النظيف. ولكن بفضل العمل الممتاز لفريق React ، يمكنك الآن استخدام ref الأصلي:

 import styled from "styled-components" const Component = styled.div` color: red; ` //    render <Component ref={element => { this.myRef = element; }} 

تحسينات لكتاب TypeScript

نحن لا نقوم بذلك مباشرة ، لكننا نحب حقًا @ babel / preset-Typcript . يعني وجودها أن كل من يكتب على TypeScript سيكون قادرًا في النهاية على استخدام المكوّن الإضافي babel للمكونات ذات الأنماط مع جميع فوائدها ، بما في ذلك التصحيح المبسط باستخدام أسماء المكونات في الفصول ، ودعم عرض الخادم ، وتقليل حجم الحزم.

بالإضافة إلى ذلك ، أكملنا ترجمة أنواع TS إلى DefinitelyTyped. يمكن للمجتمع الآن العمل معهم وإصلاح أخطاء الكتابة بالسرعة التي تناسبهم ، دون الارتباط بإصدارات المكونات ذات النمط. يمكن العثور على إعلانات النوع هنا .

الملخص

من هذه المادة ، تعرفت على الميزات التجريبية الجديدة للمكونات ذات النمط v4 والتحسينات التي أدخلت عليها. نأمل أن يكون كل هذا مفيدًا لأولئك الذين يستخدمون المكونات ذات النمط ، وربما يكون من المثير للاهتمام لأولئك الذين سيجربون هذه المكتبة فقط.

أعزائي القراء! هل تستخدم مكتبة المكونات ذات النمط في مشاريعك؟