React.js: पुन: प्रयोज्य घटकों बनाम मिक्सिन के उपयोगिता फ़ंक्शन

Question

मान लें कि मेरा react.js ऐप तिथियों को प्रदर्शित करने जा रहा है और मैं क्लाइंट के ब्राउज़र/ओएस में सेट प्रारूप को लागू करना चाहता हूं। ऐसे कई घटक हैं जो तिथियां दिखाते हैं और मैं उनके बीच कोड साझा करने के कुछ तरीकों का उपयोग कर सकता हूं।

1.Re-प्रयोग करने योग्य React.js घटकों की तरह:

var DateFormatter = require('./../formatters/Date'); 
<DateFormatter value={invoice.date} /> 

2.Utility कार्यों React.js mixins के माध्यम से साझा, यानी:

var React = require('react'); 

module.exports = React.createClass({ 
    render : function(){ 
     if(this.props.value === null || this.props.value===undefined) 
      return false; 
     var formattedValue = new Date(this.props.value).toLocaleDateString(); 
     return(
      <span> 
       {formattedValue} 
      </span> 
     ); 
    } 
}); 

और फिर उन्हें चाहते का उपयोग

module.exports = { 
    renderDate : function(dateValue){ 
     if(dateValue === null || dateValue===undefined) 
      return false; 
     var formattedValue = new Date(dateValue).toLocaleDateString(); 
     return(
      <span> 
       {formattedValue} 
      </span> 
     ); 
    } 
} 

और फिर बस एक घटक में मिश्रण जोड़ें और

जैसे कुछ का उपयोग करें

{this.renderDate(invoice.date)} 

मेरे लिए ऐसा लगता है कि अब इन 2 दृष्टिकोणों के बीच कोई अंतर नहीं है। लेकिन मुझे प्रत्येक समाधान के पेशेवरों और विपक्ष के बारे में समुदाय की राय सुनना अच्छा लगेगा। TIA!

Answer 1

एक पहलू प्रदर्शन है: यदि आप ऊपर की तरह की तारीख को प्रदर्शित करने के लिए एक घटक लिखते हैं, तो आप इसे PureRenderMixin के साथ चिह्नित कर सकते हैं, क्योंकि प्रस्तुत आउटपुट केवल प्रोप पर निर्भर करता है। यह प्रतिपादन को थोड़ा बढ़ा सकता है, क्योंकि स्वरूपण केवल दिनांक बदलते समय ही किया जाना चाहिए।

स्वच्छ कोड बिंदु दृश्य से, मैं या तो एक घटक लिखूंगा या एक गैर-प्रतिक्रिया उपयोगिता फ़ंक्शन का उपयोग करूंगा जो सिर्फ एक स्ट्रिंग को दिनांक स्वरूपित करता है - दिनांक स्वरूपण और डोम तत्वों को जोड़े जाने की आवश्यकता नहीं है। कुछ ऐसा:

function formatDate(dateValue){ 
    if(dateValue == null) 
     return "" 
    return new Date(dateValue).toLocaleDateString() 
}