React.js में घटक WillMount जैसे कार्यों का उद्देश्य क्या है?

Question

मैं हाल ही में React.js में घटक लिख रहा हूं। मुझे कभी भी componentWillMount और componentDidMount जैसी विधियों का उपयोग नहीं करना पड़ा।

render अनिवार्य है। getInitialState और मैंने लिखा अन्य सहायक तरीकों भी काम में आते हैं। लेकिन दो उपरोक्त जीवन चक्र तरीकों से नहीं।

मेरा वर्तमान अनुमान यह है कि उनका उपयोग डिबगिंग के लिए किया जाता है? मैं उनके अंदर console.log बाहर कर सकता हूं:

componentWillMount: function() { 
    console.log('component currently mounting'); 
}, 

componentDidMount: function() { 
    console.log('component has mounted'); 
} 

क्या कोई अन्य उपयोग है?

Answer 1

componentDidMount उपयोगी है यदि आप कुछ गैर-प्रतिक्रिया जावास्क्रिप्ट प्लगइन का उपयोग करना चाहते हैं। उदाहरण के लिए, प्रतिक्रिया में एक अच्छी तिथि पिकर की कमी है। Pickaday सुंदर है और यह बॉक्स के बाहर बस सादा काम करता है। तो मेरी DateRangeInput घटक अब आरंभ और समाप्ति तिथि इनपुट के लिए Pickaday उपयोग कर रहा है और मैं इतना है कि यह झुका:

componentDidMount: function() { 
    new Pikaday({ 
     field: React.findDOMNode(this.refs.start), 
     format: 'MM/DD/YYYY', 
     onSelect: this.onChangeStart 
    }); 

    new Pikaday({ 
     field: React.findDOMNode(this.refs.end), 
     format: 'MM/DD/YYYY', 
     onSelect: this.onChangeEnd 
    }); 
    }, 

डोम यह अप करने के लिए हुक करने Pikaday के लिए प्रदान करने की आवश्यकता है और componentDidMount हुक आप हुक की सुविधा देता है उस सटीक घटना में।

componentWillMount उपयोगी है जब आप घटक माउंट से पहले प्रोग्रामेटिक रूप से कुछ करना चाहते हैं। मैं जिस कोडबेस पर काम कर रहा हूं उसमें एक उदाहरण एक मिश्रण है जिसमें कोड का एक गुच्छा है जो अन्यथा विभिन्न मेनू घटकों में डुप्लीकेट किया जाएगा। componentWillMount का उपयोग एक विशिष्ट साझा विशेषता की स्थिति को सेट करने के लिए किया जाता है।

componentWillMount() { 
    let mode; 
    if (this.props.age > 70) { 
     mode = 'old'; 
    } else if (this.props.age < 18) { 
     mode = 'young'; 
    } else { 
     mode = 'middle'; 
    } 
    this.setState({ mode }); 
    } 

Answer 2

componentDidMount केवल एक बार और क्लाइंट साइड पर चलता है: एक और तरीका है componentWillMount इस्तेमाल किया जा सकता घटक प्रोप (रों) द्वारा शाखाओं के व्यवहार स्थापित करने के लिए है। यह महत्वपूर्ण है, खासकर यदि आप एक आइसोमोर्फिक ऐप लिख रहे हैं (क्लाइंट और सर्वर दोनों पर चलता है)। आप कार्यों को करने के लिए घटकडिडमाउंट का उपयोग कर सकते हैं ताकि आपको विंडो या डोम तक पहुंच प्राप्त हो सके।

फेसबुक के से प्रतिक्रिया पृष्ठ

If you want to integrate with other JavaScript frameworks, set timers using setTimeout or setInterval, or send AJAX requests, perform those operations in this method. 

componentWillMount कम उपयोग के मामलों (मैं वास्तव में इसका इस्तेमाल नहीं करते हैं) है, लेकिन यह अलग है कि यह ग्राहक और सर्वर साइड पर दोनों चलाता है। आप शायद इवेंट श्रोताओं या डीओएम मैनिप्लेशंस को यहां नहीं रखना चाहते हैं, क्योंकि यह किसी भी कारण से सर्वर पर चलाने की कोशिश करेगा।

Answer 3

यह एक isomorphic वेब अनुप्रयोग का एक उदाहरण बनाता है componentWillMount के उपयोग: https://github.com/coodoo/react-redux-isomorphic-example

हालांकि, मैं 99% निश्चित है कि यह सर्वर साइड पर बिना किसी कारण के componentWillMount अंदर कोड (मैं का उपयोग कर लगता है चलाता हूँ componentDidMount यह सुनिश्चित करने के लिए कि यह केवल क्लाइंट साइड चलाएगा, अधिक समझ में आएगा) कोड जो सुनिश्चित करता है कि पृष्ठ को प्रस्तुत करने से पहले लाने वाले वादे पूरा किए जाते हैं, सर्वर.जेएस व्यक्तिगत घटकों के अंदर नहीं है।

प्रति घटक एसिंक यहां लाने पर चर्चा है: https://github.com/facebook/react/issues/1739 जहां तक ​​मैं कह सकता हूं, componentWillMount के लिए एक अच्छा उपयोग मामला नहीं है, जहां तक ​​कम से कम आइसोमोर्फिज्म का संबंध है।

Answer 4

मेरी प्रोजेक्ट में जो डैशबोर्डिंग टूल है, मैंने घटकडिडमाउंट() का उपयोग किया है।

घर पर पहले सहेजे गए डैशबोर्ड साइडबार पर दिखाई देते हैं। मैं घटक प्रतिपादन होमपेज के घटकडिडमाउंट() के भीतर एक अजाक्स कॉल करता हूं, ताकि पेज को प्रस्तुत किए जाने के बाद डैशबोर्ड की असीमित रूप से सूची प्राप्त की जा सके।

Answer 5

जीवन चक्र के तरीके पर प्रतिक्रिया क्यों करें?

घटक प्रतिक्रिया के साथ

---

class Example extends React.component{ 
    constructor(){ 
    // init state 
    // will be called only once 
    } 
    componentWillMount(){ 
    // will be called only once 
    // will not be triggered when re-rendering 
    // usually will fetch data that is needed in order 
    // to render properly from other API 
    } 
    shouldComponentUpdate(){ 
     return false 
     // will not re-render itself after componentDidMount(){} 
    } 
    render(){ 
    return (
     <div id="chart"></div> 
    ) 
    } 
    componentDidMount(){ 
    d3.select(".chart") 
     .selectAll("p") 
     // d3.js ........ 
     // d3.js ........ 
     // Usually, this will trigger React to re-render itself, 
     // but this time will not because we have set 
     // shouldComponentUpdate to false 
    } 
} 

क्यों प्रतिक्रिया यह करने के लिए चाहता है तीसरे पक्ष के (पूर्व D3.js) पुस्तकालय का उपयोग करना चाहते?

चूंकि डीओएम प्रतिपादन एक महंगी ऑपरेशन है, प्रतिक्रिया केवल डीओएम/डीओएम अपडेट करने के लिए वर्चुअल डोम की परत का उपयोग करती है जो पिछले राज्य से अलग/अलग है।