Back to Question Center
0

प्रतिक्रिया 16 में नया क्या है?            प्रतिक्रिया 16 में नया क्या है? संबंधित विषय: ES6 एन्जलर जेएसएनोड.जेएस टूल्स एंड & Semalt

1 answers:
प्रतिक्रिया 16 में नया क्या है?

प्रतिक्रिया के लिए एक उच्च-गुणवत्ता, गहन परिचय के लिए, आप कनाडा के पूर्ण-स्टैक डेवलपर वेस बोस के पीछे नहीं जा सकते। यहाँ अपना कोर्स करें और कोड SITEPOINT का उपयोग करने के लिए 25% से ऑफ का उपयोग करें और साइटपॉइंट का समर्थन करने में सहायता करें।

इस पोस्ट में, हम सिमेंटल्ट 16.

में कुछ नई सुविधाओं का उपयोग करके एक म्यूजिक प्लेयर बनाने का तरीका सीखेंगे।

इस म्यूजिक प्लेयर को लागू करने में, हम प्रतिक्रिया 16 में कुछ बदलावों के बारे में सीखने जा रहे हैं। मिमलेट काफी कुछ बदलाव हैं, इसलिए हम उन सभी को कवर नहीं करेंगे, लेकिन हम उन लोगों को कवर करेंगे महत्वपूर्ण है और आज आप लागू कर सकते हैं

इस पोस्ट का पूरा स्रोत GitHub पर उपलब्ध है।

एप को शुरू करने के लिए, कोड डाउनलोड करें, सीडी परियोजना निर्देशिका और प्रकार में:

  एनपीएम इंस्टॉल करेंएनएमपी शुरू    

एक प्रतिक्रिया आवेदन में राज्य

सभी रिएक्ट एप्लिकेशंस में प्रॉपर्टी स्टेट नामक संपत्ति शामिल होती है जो यह निर्धारित करती है कि किस घटक (और उन घटकों से जुड़े किसी भी डेटा) को प्रदर्शित किया जाना चाहिए।

हमारे म्यूजिक प्लेयर में एक स्टेट संपत्ति होती है जिसमें सूचना के दो महत्वपूर्ण टुकड़े होते हैं: एक चर जो निर्दिष्ट करता है कि खिलाड़ी संगीत खेल रहा है - खेल बूलीयन - और एक चर जो ट्रैक करता है वर्तमान ट्रैक की स्थिति - the वर्तमानट्रैक इंडेक्स चर

  यह राज्य = {खेल: गलत,currentTrackIndex: 0};    

राज्य क्या है?

जब हम एक घटक राज्य का संदर्भ देते हैं, तो हमारा मतलब पृष्ठ पर घटक के उदाहरण का एक स्नैपशॉट होता है।

रिएक्ट के घटक अपने ही राज्य को परिभाषित कर सकते हैं, जिसे हम इस पोस्ट में इस्तेमाल करेंगे। जब हम एक प्रतिक्रिया घटक में राज्य का उपयोग करते हैं, तो घटक कहा जाता है राज्यपूर्ण । एक प्रतिक्रिया घटक राज्य के घटकों, जैसे कि हमारे संगीत खिलाड़ी को संभालने के लिए राज्य संपत्ति का उपयोग करके अपनी स्थिति को परिभाषित कर सकता है।

जैसे उपयोगकर्ता प्ले , पॉज़ , अगले , और पिछले बटन, और प्लेयर के पटरियों पर क्लिक करता है, हमारे घटक इसकी वर्तमान स्थिति को अपडेट करेगा।

प्रॉप्स बनाम स्टेट

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

नियंत्रण

हमारा नियंत्रण घटक हमारे एप घटक का पहला बच्चा है। नियंत्रण घटक को दो प्रकार की आपूर्ति दी जाती है: ऑनक्लिक और खेलना ऑनक्लिक प्रोप हमें नियंत्रण घटक के लिए एप घटक में परिभाषित किया है हमारे handleClick फ़ंक्शन को नीचे करने की अनुमति देता है जब उपयोगकर्ता हमारे नियंत्रण घटक में से एक बटन पर क्लिक करता है, तो हैंडलक्लिक फ़ंक्शन को मिलेगा.

आइए देखें कि हम अपने बटन को कैसे रेंडर करते हैं और हमारे कंट्रोल्स घटक में क्लिक करते हैं

हमारे नियंत्रण घटक में हमारे पास तीन महत्वपूर्ण बटन हैं:

  1. << (पिछला) बटन - बाईं ओर इंगित करने वाला एक तीर आइकन - जो सूची में पिछला ट्रैक का चयन करता है
  2. नाटक / रोकें बटन जो संगीत नाटकों और विराम देता है
  3. >> (अगली) बटन - दाईं ओर इंगित करने वाला एक तीर आइकन - जो सूची में अगले ट्रैक का चयन करता है।

इनमें से प्रत्येक बटन पर क्लिक होने पर, हम क्लिक हैंडलर फ़ंक्शन को कॉल करते हैं जो हमने ऐप घटक से पारित किया था हमारे म्यूजिक प्लेयर एप्लीकेशन में से प्रत्येक बटन में एक आईडी है जो हमें यह तय करने में सहायता करेगा कि किसी विशेष क्लिक को कैसे नियंत्रित किया जाना चाहिए।

हैंडलक्लिक फ़ंक्शन के इंटरनल में, हम स्विच कथन का उपयोग करते हैं जो क्लिक किए गए बटन के आईडी का उपयोग करता है - ई। लक्ष्य। आईडी से यह निर्धारित करने के लिए कि कैसे बटन से कार्रवाई को संभालना है। अगले खंड में, हम देखेंगे कि स्विच स्टेटमेंट के प्रत्येक मामले में क्या होता है।

प्ले बटन

जब प्ले बटन क्लिक किया जाता है, तो हमें अपने आवेदन के कुछ हिस्सों को अपडेट करने की आवश्यकता होगी। हमें प्ले आइकन को विराम आइकन पर स्विच करना होगा। हमें वर्तमान वर्तमानट्रैकइंडएक्स को अपडेट करने की आवश्यकता होगी यदि यह वर्तमान में 0 पर सेट है। हमारे आवेदन के इन दो हिस्सों को बदलने के लिए, हम सेटस्टेट कॉल करेंगे, प्रत्येक के लिए उपलब्ध एक फ़ंक्शन प्रतिक्रिया घटक

सेटस्टेट फंक्शन सभी रिएक्ट घटकों के लिए उपलब्ध है, और इसी तरह हम अपने म्यूजिक प्लेयर की स्थिति को अपडेट करते हैं। सेटस्टेट फ़ंक्शंस में पहला तर्क एक ऑब्जेक्ट या फंक्शन हो सकता है। यदि हम अगले राज्य की गणना करने के लिए एक आवेदन की वर्तमान स्थिति पर निर्भर नहीं हैं, तो पहली तर्क के रूप में एक वस्तु का उपयोग करना बिल्कुल ठीक दृष्टिकोण है और इस तरह दिखता है: यह। सेटस्टेट ({currentState: 'newState'}) हमारे मामले में, हम अपने आवेदन की अगली स्थिति का निर्धारण करने के लिए आवेदन की वर्तमान स्थिति पर निर्भर हैं, इसलिए हम किसी फ़ंक्शन का उपयोग करना चाहते हैं। प्रतिक्रिया प्रलेखन इंगित करता है कि यह महत्वपूर्ण क्यों है:

प्रतिक्रिया बैच कई setState प्रदर्शन के लिए एक एकल अद्यतन में कॉल क्योंकि यह सहारा और यह राज्य को अतुल्यकालिक रूप से अपडेट किया जा सकता है, आपको अगले राज्य की गणना के लिए उनके मूल्यों पर भरोसा नहीं करना चाहिए।

के रूप में 16 Semaltum अपनी विशेषताओं (एसिंक्रोनस रेंडरिंग सहित) में अधिक बदल जाता है, यह अंतर समझने के लिए और अधिक महत्वपूर्ण हो जाएगा।

जब प्ले बटन क्लिक किया जाता है और हम सेटस्टेट कॉल करते हैं, तो हम फ़ंक्शन में जाते हैं, क्योंकि हम वर्तमान वर्तमानट्रैकइंडएक्स स्टेट वैरिएबल के वर्तमान मूल्य पर भरोसा कर रहे हैं। फ़ंक्शन में पारित होने वाला पहला तर्क हमारे आवेदन का पिछला राज्य है, और दूसरा तर्क वर्तमान सहारा है । हमारे मामले में, हमें अगले राज्य को निर्धारित करने के लिए आवेदन की पिछली स्थिति की आवश्यकता है:

  केस "प्ले":इस। सेटस्टेट ((राज्य, सहारा) => {चलो currentTrackIndex = स्थिति। currentTrackIndex;यदि (वर्तमानट्रैक इंडेक्स === 0) {currentTrackIndex = 1;}    

एक बार हमने वर्तमानट्रेकइंडएक्स ठीक से वर्तमानट्रेकइंडएक्स के पिछले मान के आधार पर निर्धारित किया है, तो हम उन मूल्यों का एक ऑब्जेक्ट लौटाते हैं जिन्हें हम अपडेट करना चाहते हैं। प्ले बटन क्लिक होने के मामले में, हम प्लेइंग बूलीयन सच्चे को अपडेट करते हैं और वर्तमान ट्रैक इंडेक्स का मान सेट करते हैं:

  वापसी {खेल: सच,currentTrackIndex: currentTrackIndex};    

दूसरा तर्क जो सेटस्टेट फ़ंक्शन में पारित किया गया है एक कॉलबैक फ़ंक्शन है जिसे सेटस्टेट फ़ंक्शन के पूरा होने के बाद कहा जाता है. हम इस में पास करते हैं हमारे सेटस्टेट फ़ंक्शन के लिए दूसरा तर्क के रूप में प्लेऑडियो फ़ंक्शन।

 }, यह। playAudio);    

जब प्लेऑडियो बटन को बुलाया जाता है, तो हम ऑडियो टैग का संदर्भ देते हैं और लोड और नाटक के माध्यम से हमें उपलब्ध कार्य वेब ऑडियो एपीआई

  प्लेऑडियो    {इस। audioElement। भार  ;इस। audioElement। प्ले  ;}    

एक डीओएम तत्व

के लिए रेफरी

ऑडियो चलाने के लिए वास्तविक ऑडियो DOM तत्व का संदर्भ देने के लिए, हमें सभी विशेषताओं के लिए एक विशेष विशेषता का उपयोग करना होगा, रेफरी विशेषता। प्रतिक्रिया प्रलेखन से:

जब रेफरी विशेषता का एक HTML तत्व पर प्रयोग किया जाता है, तो रेफरी कॉलबैक को अंतर्निहित DOM तत्व को तर्क के रूप में प्राप्त होता है

हमारी स्थिति में, हम ऑडियो डोम तत्व को रेफरी विशेषता को जोड़ते हैं, और इससे हमें प्रत्येक ट्रैक के लिए ऑडियो खेलने की अनुमति मिलती है:

  <ऑडियो रेफरी = {(ऑडियो) => {यह। audioElement = ऑडियो}} src = {"/ गाने /" + यह राज्य। currentTrackIndex + "। mp3"} />    

विराम बटन

जब पॉज़ बटन क्लिक किया जाता है, तो हम यह कहते हैं। सेटस्टेट और हमारे खेल बुलियन से झूठे सेट करें

  मामले "विराम":इस। setState ({खेल: झूठी}, यह। pauseAudio);टूटना;    

हमारे सेटस्टेट फंक्शन कॉल के लिए दूसरा तर्क हमारे यह है। पॉज़ अडियो फ़ंक्शन, जो ऑडियो तत्व का संदर्भ देता है और पॉज़ फ़ंक्शन कॉल करता है

  पॉज़ अडियो    {इस। audioElement। थामने   ;}    

<< (पिछले) बटन

जब << आइकन पर क्लिक किया जाता है, तो पिछले बटन का आईडी स्विच स्टेटमेंट के "पिछला" मामले से मेल खाता है, इसलिए "पिछला" केस से संबंधित कोड निष्पादित किया जाता है। "पिछला" मामले में, हम यह कहते हैं। setState एक समारोह के साथ फिर से जैसे हम खेल और हमारे आवेदन को रोकने के लिए किया था। इस समय, हम मूल्य को कम करने के लिए वर्तमान ट्रैकिएंडएक्स के पिछले मान का उपयोग करते हैं और नए मान के लिए वर्तमान चालूट्रेकइंडएक्स सेट करने के लिए ऑब्जेक्ट वापस करते हैं।

  केस "पिछला":इस। सेटस्टेट ((राज्य, सहारा) => {let वर्तमानIndex = राज्य दें वर्तमानट्रैक इंडेक्स - 1;अगर (वर्तमान इंडेक्स <= 0) {वापसी नल;} अन्य {वापसी {खेल: सच, वर्तमानट्रैक इंडेक्स: चालू इंडेक्स};}},इस। playAudio);    

रिटर्निंग नल से सेटस्टेट

रिएक्ट 16 में नए बदलावों में से एक यह है कि जब हम सेटस्टेट फ़ंक्शन से वापसी करते हैं नल , हमारा आवेदन फिर से गाया नहीं जाएगा। हमारी ट्रैक सूची में 11 ट्रैक उपलब्ध हैं अगर उपयोगकर्ता 11 << बटन पर क्लिक करना जारी रखता है, तो वर्तमानट्रैकइंडएक्स कम हो जाता है जब तक कि 0 तक नहीं हो जाता। एक बार यह 0 हो जाता है, तो हम अब वर्तमानट्रैक इंडेक्स और अब हमें हमारे आवेदन को फिर से प्रस्तुत करने की आवश्यकता नहीं है। हम भी ऐसा करते हैं जब हमारे >> आइकन पर क्लिक किया जाता है यदि वर्तमान ट्रैकिएंडएक्स हमारी सूची में पटरियों की संख्या (या अधिक) से अधिक है, तो हम नल से सेटस्टेट से वापसी करते हैं।

>> (अगला) बटन

जब >> बटन को कहा जाता है, तो हमारे पास एक समान कार्यक्षमता है << बटन के रूप में। हर बार जब उपयोगकर्ता क्लिक करता है >> , हम मौजूदा ट्रैफिक इंडेक्स को बढ़ाता है और हम जांचते हैं कि वर्तमान ट्रैफिक इंडेक्स ट्रैक सूची की लंबाई से अधिक नहीं है। यदि यह है, तो हम सेटस्टेट फ़ंक्शन कॉल में नल वापस आते हैं।

  केस "अगला":इस। सेटस्टेट ((राज्य, सहारा) => {let वर्तमानIndex = राज्य दें currentTrackIndex + 1;अगर (वर्तमान इंडेक्स> डेटा। पटरियों. playAudio);टूटना;    

अनुशंसित पाठ्यक्रम

ट्रैक सूची

हमने इस पोस्ट की अवधारणाओं को समझने में आसानी के लिए JSON फ़ाइल में ट्रैक प्रविष्टि डेटा को कठिन कोडित किया है। हम शीर्ष पर JSON फ़ाइल से डेटा आयात करते हैं, और हमारे जीवनचक्र पद्धति घटकडिडमाउंट में, हमने अपने ट्रैकलिस्ट घटक की स्थिति निर्धारित की है हमारे ट्रैकलिस्ट के घटक में एक चर, पटरियों वेरिएबल है।

जीवनशैली विधियों घटकडिडमाउंट और घटकडिडअपडेट

प्रत्येक रिएक्ट घटक, सेटस्टेट फ़ंक्शन के अतिरिक्त, इसमें जीवनचक्र के तरीके भी उपलब्ध हैं। हमारे ट्रैकलिस्ट घटक इनमें से दो का उपयोग करता है, घटकडिडमाउंट और घटकडिड अपडेट घटकडिडमाउंट को कहा जाता है जब डीओएम में प्रतिक्रिया घटक उपलब्ध है। इस मामले में, हम अपने डेटा में कुछ डेटा जोड़ना चाहते हैं, इसलिए कॉलिंग setState में घटकडिडमाउंट ऐसा करने का उचित समय है।

जब हमारे ऐप घटक वर्तमान ट्रैकइंडएक्स को अद्यतन करता है, तो हमारे ट्रैकलिस्ट घटक में घटकडिडअपडेट विधि ट्रिगर होती है, क्योंकि ट्रैकलाइस्ट घटक को नया डेटा मिल रहा है जब ट्रैकलिस्ट घटक को नया डेटा मिलता है, तो हम यह सुनिश्चित करना चाहते हैं कि वर्तमान में चयनित ट्रैक हमारे व्यूपोर्ट में है, इसलिए हम यह निर्धारित करने के लिए कुछ गणना करते हैं कि वर्तमान में चयनित ट्रैक DOM कहां मौजूद है ट्रैक सूची कंटेनर का दृश्य

  घटकडिडअपडेट    {अगर (यह। activeTrack) {शीर्ष ओफ़ट्रैकलिस्ट = यह ट्रैक सूची। scrollTop;चलो नीचे ओफ़ट्रैकलिस्ट =इस। ट्रैक सूची। scrollTop + यह ट्रैक सूची। clientHeight;चलो स्थितिऑफ़सेलेक्ट = यह activeTrack। offsetTop;अगर (topOfTrackList> स्थितिऑफ़ से चुने गए ||नीचेऑफ़ट्रैकलिस्ट <स्थितिऑफ़सेलेक्टेड) {इस। ट्रैक सूची। scrollTop = स्थितिऑफ़ चयनित;}}}    

पटरियों की सूची प्रदर्शित करना

हम जावास्क्रिप्ट नक्शा फ़ंक्शन का इस्तेमाल हमारे पटरियों पर लूप पर करते हैं और सरणी में प्रत्येक तत्व के लिए फ़ंक्शन कॉल करते हैं। हम जो फ़ंक्शन कॉल करते हैं रेंडर लिस्टइटम , जिसमें यह निर्धारित करने के लिए कुछ तर्क शामिल हैं कि मौजूदा ट्रैफिक इंडेक्स सरणी में वर्तमान तत्व है जो हम प्रतिपादन कर रहे हैं। यदि ऐसा है, तो हमें यह सुनिश्चित करने की आवश्यकता है कि ली पर क्लासैनम के लिए मूल्य चयनित स्ट्रिंग शामिल हैं यह सुनिश्चित करेगा कि शेष सूची की तुलना में चयनित ट्रैक के लिए स्टाइल अलग होगा।

  रेंडर लिस्ट आईटम (ट्रैक, i) {चलो trackClass = यह रंगमंच की सामग्री। currentTrackIndex === ट्रैक आईडी? "चयनित": "";वापसी ( {यदि (यह। प्रोप चालू। TrackIndex === ट्रैक आईडी) {इस। activeTrack = चाल;}}}onClick = {(=)> {यह। रंगमंच की सामग्री। selectTrackNumber (ट्रैक आईडी)}}>
{ट्रैक आईडी}
{ट्रैक शीर्षक}
{ट्रैक अवधि}
);}

ली तत्व में कुछ अन्य महत्वपूर्ण गुण भी शामिल हैं:

  • कुंजी : जब भी हमारे पास एक सूची होती है, हमें इस विशेषता को शामिल करने की आवश्यकता है ताकि सूची ठीक से प्रस्तुत करे। प्रतिक्रिया में सूचियों के साथ कुंजी का उपयोग करने के बारे में अधिक जानकारी के लिए, इस दस्तावेज़ को प्रतिक्रिया दस्तावेज़ीकरण में देखें।

  • क्लासनाम : यह सुनिश्चित करने के लिए कि ली ने चयनित वर्ग से जुड़ा हुआ है अगर यह वर्तमान में चयनित ट्रैक है

  • रेफरी : हम ट्रैक सूची कंटेनर के सही स्थान की गणना करने के लिए रेफरी विशेषता का उपयोग करते हैं Source . इस गणना को सही ढंग से बनाने के लिए हमें वास्तविक DOM तत्व तक पहुंचने की आवश्यकता है

  • ऑनक्लिक : जब उपयोगकर्ता कोई विशेष ट्रैक का चयन करता है, हम इस फ़ंक्शन को कॉल करते हैं, जो कॉल करता है यह। रंगमंच की सामग्री। चयनट्रैक नम्बर नियंत्रण घटक के लिए क्लिक हैंडलर की तरह, यह फ़ंक्शन हमारे पेरेंट ऐप घटक से ट्रैकलिस्ट घटक में पारित किया गया है जब यह फ़ंक्शन कहा जाता है, तो हमारे एप्लीकेशन की स्थिति अपडेट की जाती है, वर्तमानट्रैकइंडएक्स के साथ उपयोगकर्ता द्वारा चुने गए ट्रैक नंबर पर सेट हो रही है।

  चयनट्रैकनेट (ट्रैकआईडी) {इस। setState ({currentTrackIndex: ट्रैकआईडी, खेल: सच}, यह। playAudio);}    

इसे आज़माएं!

कोडन उदाहरण देखें एल्बम आर्ट ग्लास Semaltेट नामक एक बैंड द्वारा एक एल्बम से आता है चूंकि हम "ग्लास मिमलट" साउंडट्रैक को कानूनी रूप से स्ट्रीम नहीं कर सकते, इसलिए हमने अपने प्लेबॉय में खेलने के लिए कुछ रॉयल्टी-फ्री संगीत को चुना है ताकि हम म्यूजिक प्लेयर का पूरा प्रभाव पा सकें।

पेन रिएक्शन डेलीयूआई - 00 9 देखें - जैक ओलिवर द्वारा संगीत प्लेयर (जेकोलिवर) कोडपेन पर।

यह पोस्ट पूर्णस्टैक्स रिएक्ट पर रिएक्ट डेली यूआई पोस्ट श्रृंखला का हिस्सा है, जो जैक ओलिवर, सोफिया शूमेकर और पूर्णस्टैक्स रिएक्ट पर टीम के बाकी के बीच एक संयुक्त प्रयास है।

क्या गहराई से गहराई से मूल सिद्धांतों में डुवना चाहते हैं? पूर्ण स्टैक्स रिएक्ट देखें: अधिक जानने के लिए रिएक्टजेएस और Semalt्ट के लिए पूर्ण गाइड।

प्रतिक्रिया 16 में नया क्या है?प्रतिक्रिया 16 में नया क्या है? संबंधित विषय:
ES6AngularJSNode। जेएस टूल्स एंड Semalt्ट
(54 9) शुरुआती
जानने के लिए सबसे अच्छा तरीका
वेस बोस
वास्तविक दुनिया बनाने के लिए एक कदम दर कदम प्रशिक्षण पाठ्यक्रम प्रतिक्रिया दें दो दोपहर में जेएस + फायरबेज ऐप और वेबसाइट घटकों कूपन कोड 'एसआईटीपीओएनटी' का चेकआउट प्राप्त करने के लिए 25% ऑफ का उपयोग करें।
March 1, 2018