प्रतिक्रियाशील हुक के लिए संक्रमण को स्वचालित करें

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

रिएक्ट हुक

रिएक्ट हुक परिचय लेख विवरण हुक क्या हैं और वे क्या साथ खाते हैं। संक्षेप में, यह कक्षाओं का उपयोग किए बिना state मुक्त घटक बनाने के लिए एक नई पागल तकनीक है।

button.js पर विचार करें। button.js फाइल:

 import React, {Component} from 'react'; export default Button; class Button extends Component { constructor() { super(); this.state = { enabled: true }; this.toogle = this._toggle.bind(this); } _toggle() { this.setState({ enabled: false, }); } render() { const {enabled} = this.state; return ( <button enabled={enabled} onClick={this.toggle} /> ); } } 

हुक के साथ, यह इस तरह दिखेगा:

 import React, {useState} from 'react'; export default Button; function Button(props) { const [enabled, setEnabled] = useState(true); function toggle() { setEnabled(false); } return ( <button enabled={enabled} onClick={toggle} /> ); } 

आप लंबे समय तक तर्क दे सकते हैं कि इस प्रकार की रिकॉर्डिंग तकनीक से अपरिचित लोगों के लिए अधिक स्पष्ट है, लेकिन एक बात तुरंत स्पष्ट है: कोड अधिक संक्षिप्त और पुन: उपयोग करना आसान है। कस्टम हुक के दिलचस्प सेट usehooks.com और streamich.imtqy.com पर देखे जा सकते हैं।

अगला, हम सबसे छोटे विस्तार के लिए सिंटैक्स मतभेदों का विश्लेषण करेंगे और प्रोग्राम कोड रूपांतरण प्रक्रिया से निपटेंगे, लेकिन इससे पहले मैं संकेतन के इस रूप का उपयोग करने के उदाहरणों के बारे में बात करना चाहूंगा।

गीतात्मक विषयांतर: विनाशकारी वाक्यविन्यास का गैर-मानक उपयोग

ES2015 ने दुनिया को सरणियों के पुनर्गठन के रूप में ऐसी अद्भुत चीज दी। और अब, प्रत्येक तत्व को व्यक्तिगत रूप से निकालने के बजाय:

 const letters = ['a', 'b']; const first = letters[0]; const second = letters[1]; 

हम एक ही बार में सभी आवश्यक तत्व प्राप्त कर सकते हैं:

 const letters = ['a', 'b']; const [first, second] = letters; 

ऐसा रिकॉर्ड न केवल अधिक संक्षिप्त है, बल्कि त्रुटियों के लिए भी कम संभावना है, क्योंकि यह तत्व सूचकांकों को याद रखने की आवश्यकता को हटा देता है और आपको इस बात पर ध्यान केंद्रित करने की अनुमति देता है कि वास्तव में क्या महत्वपूर्ण है: चर का प्रारंभ।

इस प्रकार, हम इस es2015 आते हैं कि यदि यह es2015 लिए नहीं es2015 टीम राज्य के साथ काम करने के ऐसे असामान्य तरीके के साथ नहीं आएगी।

अगला, मैं कई पुस्तकालयों पर विचार करना चाहूंगा जो एक समान दृष्टिकोण का उपयोग करते हैं।

पकड़ने की कोशिश करो

प्रतिक्रिया में हुक की घोषणा से छह महीने पहले, मैं इस विचार के साथ आया था कि विनाशकारी का उपयोग न केवल सरणी से सजातीय डेटा प्राप्त करने के लिए किया जा सकता है, बल्कि एक त्रुटि या फ़ंक्शन के परिणाम के बारे में जानकारी प्राप्त करने के लिए भी सादृश्य द्वारा किया जा सकता है नोड में कॉलबैक के साथ। js. उदाहरण के लिए, ट्राइ try-catch सिंटैक्स का उपयोग करने के बजाय:

 let data; let error; try { data = JSON.parse('xxxx'); } catch (e) { error = e; } 

जो बहुत बोझिल लग रहा है, लेकिन बहुत कम जानकारी देता है, और हमें उपयोग करने के लिए मजबूर करता है, हालांकि हमने चर के मूल्यों को बदलने की योजना नहीं बनाई थी। इसके बजाय, आप ट्राइ-कैच फ़ंक्शन को कॉल कर सकते हैं, जो आपकी ज़रूरत की हर चीज़ करेगा, जो हमें ऊपर सूचीबद्ध समस्याओं से बचाएगा:

 const [error, data] = tryCatch(JSON.parse, 'xxxx'); 

इस दिलचस्प तरीके से, हमने सभी अनावश्यक सिंटैक्टिक निर्माणों से छुटकारा पा लिया, केवल आवश्यक छोड़कर। इस विधि के निम्नलिखित फायदे हैं:

• किसी भी चर नाम को निर्दिष्ट करने की क्षमता जो हमारे लिए सुविधाजनक है (जब वस्तुओं के विनाश का उपयोग करते हुए, हमारे पास ऐसा कोई विशेषाधिकार नहीं होगा, या इसके बजाय, इसकी अपनी बोझिल कीमत होगी);
• डेटा के लिए स्थिरांक का उपयोग करने की क्षमता जो बदलती नहीं है;
• अधिक संक्षिप्त वाक्यविन्यास, जो सब हटाया जा सकता है वह गायब है;

और, फिर से, यह सब सरणियों के विनाश के वाक्यविन्यास के लिए धन्यवाद। इस सिंटैक्स के बिना, लाइब्रेरी का उपयोग करना हास्यास्पद लगेगा:

 const result = tryCatch(JSON.parse, 'xxxx'); const error = result[0]; const data = result[1]; 

यह अभी भी मान्य कोड है, लेकिन यह विनाशकारी की तुलना में काफी कम है। मैं ट्राई-कैच लाइब्रेरी का एक उदाहरण भी जोड़ना चाहता हूं, जो कि async-await के आगमन के साथ है async-await try-catch निर्माण अभी भी प्रासंगिक है, और इसे इस तरह लिखा जा सकता है:

 const [error, data] = await tryToCatch(readFile, path, 'utf8'); 

यदि विनाशकारी के ऐसे उपयोग का विचार मेरे पास आया, तो प्रतिक्रिया के रचनाकारों को भी क्यों नहीं, क्योंकि वास्तव में, हमारे पास एक फ़ंक्शन जैसा कुछ है जिसमें 2 रिटर्न मान हैं: एक हास्कल ट्यूपल।

इस पर गेय विषयांतर पूरा हो सकता है और परिवर्तन के मुद्दे पर आगे बढ़ सकता है।

रिएक्ट हुक में एक वर्ग परिवर्तित करना

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

react-hooks का उपयोग करके Component से विरासत में मिली कक्षा को एक फ़ंक्शन में बदलने के लिए, निम्नलिखित कदम उठाने होंगे:

• bind निकालना
• सार्वजनिक करने के लिए निजी विधियों का नाम बदलें ("_" निकालें);
• हुक का उपयोग करने के लिए this.state बदल this.state
• हुक का उपयोग करने के लिए this.setState बदल this.setState
• this हर जगह से हटा दें
• कार्य करने के लिए class परिवर्तित करें
• आयात में Component बजाय उपयोग का उपयोग करें

संबंध

@putout/plugin-react-hooks साथ putout स्थापित करें:

 npm i putout @putout/plugin-react-hooks -D 

अगला, .putout.json फ़ाइल बनाएँ:

 { "plugins": [ "react-hooks" ] } 

फिर कार्रवाई में putout का प्रयास करें।

 coderaiser@cloudcmd:~/example$ putout button.js /home/coderaiser/putout/packages/plugin-react-hooks/button.js 11:8 error bind should not be used react-hooks/remove-bind 14:4 error name of method "_toggle" should not start from under score react-hooks/rename-method-under-score 7:8 error hooks should be used instead of this.state react-hooks/convert-state-to-hooks 15:8 error hooks should be used instead of this.setState react-hooks/convert-state-to-hooks 21:14 error hooks should be used instead of this.state react-hooks/convert-state-to-hooks 7:8 error should be used "state" instead of "this.state" react-hooks/remove-this 11:8 error should be used "toogle" instead of "this.toogle" react-hooks/remove-this 11:22 error should be used "_toggle" instead of "this._toggle" react-hooks/remove-this 15:8 error should be used "setState" instead of "this.setState" react-hooks/remove-this 21:26 error should be used "state" instead of "this.state" react-hooks/remove-this 26:25 error should be used "setEnabled" instead of "this.setEnabled" react-hooks/remove-this 3:0 error class Button should be a function react-hooks/convert-class-to-function 12 errors in 1 files fixable with the `--fix` option 

putout 12 स्थानों पर पाया जा सकता है, कोशिश करें:

 putout --fix button.js 

अब button.js दिखता है:

 import React, {useState} from 'react'; export default Button; function Button(props) { const [enabled, setEnabled] = useState(true); function toggle() { setEnabled(false); } return ( <button enabled={enabled} onClick={setEnabled} /> ); } 

सॉफ्टवेयर कार्यान्वयन

आइए ऊपर वर्णित कई नियमों पर अधिक विस्तार से विचार करें।

this हर जगह से हटा दें

चूँकि हम कक्षाओं का उपयोग नहीं करते हैं, इस प्रपत्र के सभी भाव। setEnabled को setEnabled परिवर्तित किया जाना चाहिए।

ऐसा करने के लिए, हम ThisExpression के नोड्स के माध्यम से जाएंगे , जो बदले में, MemberExpression के संबंध के बच्चे हैं, और इस प्रकार object फ़ील्ड में स्थित हैं:

 { "type": "MemberExpression", "object": { "type": "ThisExpression", }, "property": { "type": "Identifier", "name": "setEnabled" } } 

निष्कासन -इस नियम के कार्यान्वयन पर विचार करें:

 //      module.exports.report = ({name}) => `should be used "${name}" instead of "this.${name}"`; //    module.exports.fix = ({path}) => { // : MemberExpression -> Identifier path.replaceWith(path.get('property')); }; module.exports.find = (ast, {push}) => { traverseClass(ast, { ThisExpression(path) { const {parentPath} = path; const propertyPath = parentPath.get('property'); //      const {name} = propertyPath.node; push({ name, path: parentPath, }); }, }); }; 

ऊपर वर्णित कोड में, उपयोगिता फ़ंक्शन traverseClass कक्षा को खोजने के लिए traverseClass है, यह सामान्य समझ के लिए इतना महत्वपूर्ण नहीं है, लेकिन यह अभी भी इसे लाने के लिए समझ में आता है, अधिक सटीकता के लिए:

 //      function traverseClass(ast, visitor) { traverse(ast, { ClassDeclaration(path) { const {node} = path; const {superClass} = node; if (!isExtendComponent(superClass)) return; path.traverse(visitor); }, }); }; //       Component function isExtendComponent(superClass) { const name = 'Component'; if (isIdentifier(superClass, {name})) return true; if (isMemberExpression(superClass) && isIdentifier(superClass.property, {name})) return true; return false; } 

परीक्षण, बदले में, इस तरह दिख सकता है:

 const test = require('@putout/test')(__dirname, { 'remove-this': require('.'), }); test('plugin-react-hooks: remove-this: report', (t) => { t.report('this', `should be used "submit" instead of "this.submit"`); t.end(); }); test('plugin-react-hooks: remove-this: transform', (t) => { const from = ` class Hello extends Component { render() { return ( <button onClick={this.setEnabled}/> ); } } `; const to = ` class Hello extends Component { render() { return <button onClick={setEnabled}/>; } } `; t.transformCode(from, to); t.end(); }); 

आयात में, useState बजाय useState उपयोग करें

रूपांतरित-आयात-घटक-से-उपयोग-राज्य नियम के कार्यान्वयन पर विचार करें।

अभिव्यक्तियों को बदलने के लिए:

 import React, {Component} from 'react' 

पर

 import React, {useState} from 'react' 

आपको ImportDeclaration नोड को संसाधित करना होगा:

  { "type": "ImportDeclaration", "specifiers": [{ "type": "ImportDefaultSpecifier", "local": { "type": "Identifier", "name": "React" } }, { "type": "ImportSpecifier", "imported": { "type": "Identifier", "name": "Component" }, "local": { "type": "Identifier", "name": "Component" } }], "source": { "type": "StringLiteral", "value": "react" } } 

हमें source.value = react साथ source.value = react खोजने की आवश्यकता है, और फिर name = Component फ़ील्ड के साथ ImportSpecifier खोज में specifiers सरणी के चारों ओर जाएं:

 //     module.exports.report = () => 'useState should be used instead of Component'; //    module.exports.fix = (path) => { const {node} = path; node.imported.name = 'useState'; node.local.name = 'useState'; }; //    module.exports.find = (ast, {push, traverse}) => { traverse(ast, { ImportDeclaration(path) { const {source} = path.node; //   react,    if (source.value !== 'react') return; const name = 'Component'; const specifiersPaths = path.get('specifiers'); for (const specPath of specifiersPaths) { //    ImportSpecifier -    if (!specPath.isImportSpecifier()) continue; //    Compnent -    if (!specPath.get('imported').isIdentifier({name})) continue; push(specPath); } }, }); }; 

सबसे सरल परीक्षण पर विचार करें:

 const test = require('@putout/test')(__dirname, { 'convert-import-component-to-use-state': require('.'), }); test('plugin-react-hooks: convert-import-component-to-use-state: report', (t) => { t.report('component', 'useState should be used instead of Component'); t.end(); }); test('plugin-react-hooks: convert-import-component-to-use-state: transform', (t) => { t.transformCode(`import {Component} from 'react'`, `import {useState} from 'react'`); t.end(); }); 

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

निष्कर्ष

आज हमने हुक पर प्रतिक्रिया करने के लिए कक्षाओं के स्वचालित रीफैक्टरिंग के तरीकों में से एक को देखा। वर्तमान में, @putout/plugin-react-hooks केवल बुनियादी तंत्र का समर्थन करता है, लेकिन समुदाय में दिलचस्पी और शामिल होने पर इसमें काफी सुधार किया जा सकता है। मुझे टिप्पणी टिप्पणियों, विचारों, उपयोग के उदाहरणों और साथ ही लापता कार्यक्षमता पर चर्चा करने में खुशी होगी।