बेहतर, तेज, अधिक शक्तिशाली: स्टाइल-घटकों v4

सामग्री के लेखक, जिसका अनुवाद आज हम प्रकाशित करते हैं, वेब डेवलपर्स समुदाय के लिए स्टाइल-घटकों v4 लाइब्रेरी के बीटा संस्करण को प्रस्तुत करना चाहते हैं। वह, पुस्तकालय के रचनाकारों की ओर से बोलते हुए कहते हैं कि स्टाइल-कलपुर्जों में शैलियों के as और संपत्तियों के लिए मूल समर्थन के साथ एक नया वैश्विक एपीआई है। लायब्रेरी ने अस्वीकार करने के मार्ग का अनुसरण किया है। .extend , यह StrictMode React v16 के साथ संगत है और बेहतर, तेज और अधिक शक्तिशाली बन गया है।

स्टाइल वाले घटक v4

स्टाइल-घटकों के नवीनतम संस्करण को स्थापित करने के लिए, इस कमांड का उपयोग करें:

 npm install styled-components@beta 

आप पुस्तकालय की क्षमताओं से खुद को परिचित कर सकते हैं, उनकी जांच कर सकते हैं, और अगर यह पता चला कि कुछ सुधार करने की आवश्यकता है, तो डेवलपर्स को इसके बारे में बताएं। यहां आप लाइब्रेरी के नए संस्करण में अपग्रेड करने के निर्देश पा सकते हैं। यहाँ स्टाइल-घटकों के लिए चैंज है v4.0.0-beta.0।

इस स्टाइल-घटक रिलीज़ की मुख्य विशेषताओं पर विचार करें:

• आकार कम करना और गति बढ़ाना। पुस्तकालय का आकार 16.1 KB से घटाकर 15 KB से कम कर दिया गया है (इसका अंतिम आकार आपके बंडल पर और बेबल प्लगइन के उपयोग पर निर्भर करता है)। बढ़ते गति में लगभग 25% की वृद्धि हुई, पुन: प्रतिपादन की गति - लगभग 7.5%।
• नई createGlobalStyle API, जो पुराने injectGlobal API को हॉट injectGlobal और थीम के समर्थन के साथ बदलने के लिए है।
• संपत्ति के लिए समर्थन, .withComponent() लिए अधिक लचीला विकल्प।
  
• एक एकीकृत styled(Comp) प्रारूप में कोडबेस के स्वचालित अनुवाद के लिए समर्थन के साथ Comp.extend से छुटकारा पाना।
• StrictMode React v16 के साथ पूर्ण संगतता। इसके अलावा, इसका मतलब है कि डेवलपर्स को रिएक्ट v15 और अन्य, प्रतिक्रिया के पुराने संस्करणों के लिए समर्थन छोड़ना पड़ा (हालांकि पॉलीफ़िल्स का इस्तेमाल शायद रिएक्ट v15 में स्टाइल-घटकों v4 के साथ काम को व्यवस्थित करने के लिए किया जा सकता है)।
• किसी भी शैली के घटकों के लिए ref लिए मूल समर्थन, और रिएक्ट v16 के लिए धन्यवाद, innerRef का उपयोग करने की कोई आवश्यकता नहीं है।

स्टाइल-कंपोनेंट्स लाइब्रेरी बीटा में जारी की जाती है ताकि जो लोग इसका उपयोग करते हैं उनके पास परिवर्तनों का परीक्षण करने के लिए पर्याप्त समय हो, और इसलिए कि सहायक तंत्र तैयार करना संभव हो जैसे कि प्रकार विवरण और नए के लिए सिंटैक्स हाइलाइटिंग टूल एपीआई। लाइब्रेरी के लगभग एक महीने तक बीटा स्थिति में रहने की उम्मीद है।

उत्पादकता

जब स्टाइल-घटकों का दूसरा संस्करण जारी किया गया था, तो हमने प्रदर्शन पर ध्यान केंद्रित करने के लिए, कोर एपीआई को अंतिम रूप देने के बाद वादा किया था। तब से, पैच के लिए धन्यवाद, हमने लाइब्रेरी के प्रदर्शन में सुधार किया है, जो विशेष रूप से, v3.1 में प्रदर्शन में 10 गुना वृद्धि का कारण बना है।

स्टाइल-घटकों के प्रदर्शन पर काम जारी है। जेएस इंजन और कोड रीफैक्टरिंग को लागू करने की ख़ासियतों के कारण, मेमोरी के साथ काम करने से संबंधित आंतरिक अनुकूलन के लिए धन्यवाद, दोनों गहरे और चौड़े घटक पेड़ों के लिए स्टाइल-घटकों v4 की बढ़ती गति लगभग 25% बढ़ गई। डायनेमिक स्टाइल अपडेट लगभग 7% तेज हैं। यहां तीन परीक्षणों के परिणामों के आधार पर स्टाइल-घटकों v3 और v4 के प्रदर्शन की तुलना की गई है। पहले दो बढ़ते घटक पेड़ों के अध्ययन से संबंधित हैं, तीसरी चिंता गतिशील घटकों के साथ घटकों को अपडेट करने की है।


स्टाइल-घटकों v3 और v4 प्रदर्शन तुलना

एक अलग वातावरण में प्राप्त ये परिणाम प्रभावशाली दिखते हैं। हालांकि, विशेष रूप से बढ़ते गति के संदर्भ में अन्य CSS-in-JS पारिस्थितिकी तंत्र पुस्तकालयों के साथ स्टाइल-घटकों v4 की तुलना करना काफी दिलचस्प होगा।


स्टाइल-घटकों v4 और अन्य पुस्तकालयों के प्रदर्शन की तुलना

जैसा कि आप देख सकते हैं, स्टाइल-घटकों का प्रदर्शन बहुत प्रभावशाली दिखता है। विशेष रूप से, सबसे तेज पुस्तकालयों की तुलना में, स्टाइल-घटकों के परिणाम बढ़ते और अद्यतन गति के संदर्भ में उनके परिणामों से मानक विचलन के भीतर हैं। यह सब हमें आधिकारिक रूप से घोषित करने की अनुमति देता है कि प्रदर्शन अब इस पुस्तकालय की समस्या नहीं है।

यद्यपि स्टाइल-घटकों का प्रदर्शन पुस्तकालय के विकास और इसे सुधारने के लिए पर्याप्त समय और प्रयास का परिणाम है, लेकिन इसका मतलब यह नहीं है कि हम अब प्रदर्शन में सुधार करने में लगे रहेंगे। यदि हमें पुस्तकालय को और भी तेज बनाने का अवसर मिलता है, तो हम इस अवसर का उपयोग करेंगे।

नई वैश्विक स्टाइलिंग एपीआई

हम काफी समय से एक नया ग्लोबल स्टाइलिंग एपीआई विकसित कर रहे हैं। पुराने API, injectGlobal में तीन गंभीर कमियां हैं: यह डायनेमिक अपडेट, हॉट 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 का उपयोग करते 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) का उपयोग styled(StyledComp) तो वही अनुकूलन जो StyledComp.extend के लिए धन्यवाद लागू किए गए थे वे स्वचालित रूप से लागू होते हैं। इसका मतलब है कि .extend अब विशेष रूप से उपयोगी नहीं है, जिसने इस API को छोड़ने की अनुमति दी है। नतीजतन, अब पुस्तकालय उपयोगकर्ता कम कोड लिख सकते हैं और अतिरिक्त एक एपीआई विकसित करने में समय बर्बाद न करने का अवसर प्राप्त कर सकते हैं। हम मानते हैं कि यह बहुत अच्छा है।

पॉलिमॉर्फिक संपत्ति के रूप में

एक और नया फीचर स्टाइल-कंपोनेंट्स 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 को हटा .withComponent ।

प्रतिक्रिया v16 और रेफरी

रिएक्ट v16 एपीआई पर स्विच करने की प्रक्रिया में, हमने पाया, अन्य बातों के अलावा, कि नए React.forwardRef एपीआई के लिए धन्यवाद, हम innerRef छुटकारा पा सकते हैं। हम इस तकनीक को विशेष रूप से पसंद नहीं करते हैं, क्योंकि यह कुछ-कुछ साफ-सुथरी हैक की तरह दिखता है। लेकिन प्रतिक्रिया टीम के उत्कृष्ट कार्य के लिए धन्यवाद, अब आप मूल ref उपयोग कर सकते हैं:

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

टाइपस्क्रिप्ट राइटर्स के लिए सुधार

हम सीधे ऐसा नहीं करते हैं, लेकिन हम वास्तव में नए @ babel / प्रीसेट-टाइपस्क्रिप्ट पसंद करते हैं । इसके अस्तित्व का मतलब है कि अब टाइपस्क्रिप्ट पर लिखने वाला हर कोई अंततः अपनी सभी उपयोगिता के साथ स्टाइल-घटकों के लिए बैबल प्लगइन का उपयोग करने में सक्षम होगा, जिसमें कक्षाओं में घटक नामों का उपयोग करके सरलीकृत डिबगिंग, सर्वर रेंडरिंग के लिए समर्थन और बंडलों के आकार को कम करना शामिल है।

इसके अतिरिक्त, हमने TS प्रकारों के अनुवाद को निश्चित रूप से पूरा किया है। समुदाय अब उनके साथ काम कर सकता है और अपनी गति से टाइपिंग त्रुटियों को ठीक कर सकता है, बिना स्टाइल-घटकों के रिलीज के बिना। प्रकार की घोषणाएं यहां पाई जा सकती हैं ।

परिणाम

इस सामग्री से, आपने स्टाइल-कंपोनेंट्स v4 के नए बीटा फीचर्स और उसमें किए गए सुधारों के बारे में सीखा। हमें उम्मीद है कि यह सब उन लोगों के लिए उपयोगी होगा जो स्टाइल-घटकों का उपयोग करते हैं, और शायद यह उन लोगों के लिए दिलचस्प होगा जो अभी इस पुस्तकालय का प्रयास करने जा रहे हैं।

प्रिय पाठकों! क्या आप अपनी परियोजनाओं में स्टाइल-कंपोनेंट लाइब्रेरी का उपयोग करते हैं?