रिएक्ट हुक के साथ चिंताओं को अलग करना

यदि आप कुछ समय के लिए रिएक्ट के साथ काम कर रहे हैं, तो आप शायद मिल गए हैं कंटेनर और प्रस्तुतिकरण घटक , या स्मार्ट और गूंगा घटक। ये शब्द वर्णन करते हैं a पैटर्न जो रिएक्ट घटकों की UI परत को तर्क से विभाजित करता है।

UI को व्यावसायिक तर्क से अलग करना प्रतिक्रिया के लिए अद्वितीय नहीं है: चिंताओं को अलग करना एक डिज़ाइन सिद्धांत है जिसमें 70 के दशक में पहले से ही आसपास रहा है. उदाहरण के लिए, डेटाबेस तक पहुँचने वाले कोड को बैकएंड पर व्यावसायिक तर्क से अलग करना आम बात है।

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

रिएक्ट हुक की शुरुआत के साथ, इसके लिए एक नया दृष्टिकोण है: का उपयोग करना कस्टम हुक.

हमें तर्क को घटक से अलग क्यों करना चाहिए?

इससे पहले कि हम अपने रिएक्ट घटकों से तर्क को अलग करना शुरू करें, हमें पता होना चाहिए कि क्यों।

हमारे कोड को इस तरह से व्यवस्थित करना जहां प्रत्येक फ़ंक्शन या घटक केवल एक चीज़ के लिए ज़िम्मेदार हो, इसका लाभ यह है कि यह बहुत अधिक है बदलने और बनाए रखने में आसान (डेव और एंड्रयू इसे कहते हैं "ओर्थोगोनालिटी"उनकी किताब में" व्यावहारिक प्रोग्रामर).

इसे रिएक्ट पर लागू करने का मतलब है कि हमारा घटक साफ और अधिक व्यवस्थित दिखाई देगा। उदाहरण के लिए, हमें UI को संपादित करने से पहले तर्क की दीवार के पीछे स्क्रॉल करने की आवश्यकता नहीं होगी।

अपने कोड को इस तरह व्यवस्थित करना न केवल इसे बेहतर और नेविगेट करने में आसान बनाता है, यह बदलना भी आसान बनाता है क्योंकि हुक बदलने से UI और इसके विपरीत प्रभावित नहीं होता है।

परीक्षण भी अधिक सुलभ है: यदि हम चाहें तो यूआई से अलग तर्क का परीक्षण कर सकते हैं। हालांकि, मेरे लिए सबसे महत्वपूर्ण लाभ यह है कि यह दृष्टिकोण मेरे कोड को कैसे व्यवस्थित करता है।

रिएक्ट हुक के साथ तर्क को कैसे अलग करें

हमारे घटक से तर्क को अलग करने के लिए, हम पहले एक कस्टम हुक बनाएंगे।

आइए इस घटक को एक उदाहरण के रूप में लें। यह आधार संख्या और घातांक के घातीय मान की गणना करता है:

आप पूरा स्रोत कोड पा सकते हैं यहाँ उत्पन्न करें.

कोड निम्न जैसा दिखता है:

export const ExponentCalculator = () => {
  const [base, setBase] = useState(4);
  const [exponent, setExponent] = useState(4);
  const result = (base ** exponent).toFixed(2);

  const handleBaseChange = (e) => {
    e.preventDefault();
    setBase(e.target.value);
  };

  const handleExponentChange = (e) => {
    e.preventDefault();
    setExponent(e.target.value);
  };

  return (
    <div className="blue-wrapper">
      <input
        type="number"
        className="base"
        onChange={handleBaseChange}
        placeholder="Base"
        value={base}
      />
      <input
        type="number"
        className="exponent"
        onChange={handleExponentChange}
        placeholder="Exp."
        value={exponent}
      />
      <h1 className="result">{result}</h1>
    </div>
  );
};

यह पहले से ही ठीक लग सकता है, लेकिन इस ट्यूटोरियल के लिए, बस कल्पना करना कि यहाँ अधिक तर्क है।

पहले कदम के रूप में, हम करेंगे तर्क को एक कस्टम हुक पर ले जाएं और इसे हमारे घटक के अंदर बुलाओ।

const useExponentCalculator = () => {
  const [base, setBase] = useState(4);
  const [exponent, setExponent] = useState(4);
  const result = (base ** exponent).toFixed(2);

  const handleBaseChange = (e) => {
    e.preventDefault();
    setBase(e.target.value);
  };

  const handleExponentChange = (e) => {
    e.preventDefault();
    setExponent(e.target.value);
  };

  return {
    base,
    exponent,
    result,
    handleBaseChange,
    handleExponentChange,
  };
};

export const ExponentCalculator = () => {
  const {
    base,
    exponent,
    result,
    handleExponentChange,
    handleBaseChange,
  } = useExponentCalculator();

  // ...
};

हम इस हुक को a . पर ले जा सकते हैं अलग फ़ाइल चिंताओं के अधिक प्रमुख पृथक्करण के लिए।

इसके अतिरिक्त, हम अपने हुक को छोटे, पुन: प्रयोज्य कार्यों में और अलग कर सकते हैं। इस मामले में, हम केवल निकाल सकते हैं calculateExponent.

उपयोग एक्सपोनेंटकैलक्यूलेटर.जेएस

const calculateExponent = (base, exponent) => base ** exponent;

const useExponentCalculator = () => {
  const [base, setBase] = useState(4);
  const [exponent, setExponent] = useState(4);
  const result = calculateExponent(base, exponent).toFixed(2);

  // ...
};

पहले उदाहरण से पूरे घटक के कोड का परीक्षण करने की तुलना में इन कार्यों का परीक्षण करना बहुत आसान है। हम किसी भी Node.js परीक्षण पुस्तकालय के साथ उनका परीक्षण कर सकते हैं, जिसमें रिएक्ट घटकों का समर्थन करने की भी आवश्यकता नहीं है।

अब हमारे पास घटक और हुक के लिए कोड में हमारा ढांचा-विशिष्ट कोड (प्रतिक्रिया) है, जबकि हमारा व्यावसायिक तर्क उन विभिन्न कार्यों में रहता है जिन्हें हमने बाद में परिभाषित किया था (जो फ्रेमवर्क-अज्ञेयवादी हैं)।

सर्वोत्तम प्रथाएं

नामकरण

मैं घटक के बाद अपने कस्टम हुक को एक संयोजन के रूप में नाम देना पसंद करता हूं use और घटक का नाम (जैसे useExponentCalculator) मैं फिर फोन करता हूँ वही फाइल करें हुक के रूप में।

आप एक अलग नामकरण परंपरा का पालन करना चाह सकते हैं, लेकिन मेरा सुझाव है लगातार रहना आपके प्रोजेक्ट में।

अगर मैं एक कस्टम हुक के कुछ हिस्सों का पुन: उपयोग कर सकता हूं, तो मैं आमतौर पर इसे किसी अन्य फ़ाइल में ले जाता हूं src/hooks.

इसे ज़्यादा मत करो

व्यावहारिक बनने की कोशिश करें। यदि किसी घटक में JS की केवल कुछ पंक्तियाँ हैं, तो तर्क को अलग करना आवश्यक नहीं है।

सीएसएस-इन-जे एस

यदि आप CSS-in-JS लाइब्रेरी का उपयोग कर रहे हैं (useStyles), आप इस कोड को दूसरी फ़ाइल में भी ले जाना चाह सकते हैं।

आप इसे हुक के समान फ़ाइल में ले जा सकते हैं। हालाँकि, मैं या तो इसे उसी फ़ाइल में घटक के ऊपर रखना पसंद करता हूँ या यदि यह बहुत बड़ा हो जाता है तो इसे अपनी फ़ाइल में ले जाना पसंद करता हूँ।

निष्कर्ष

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

कस्टम हुक प्रतिरूपकता बढ़ाने का केवल एक तरीका है; मैं भी अत्यधिक अनुशंसा करता हूं घटकों और कार्यों को छोटे, पुन: प्रयोज्य भागों में विभाजित करना जब संभव।

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