रिएक्ट "कंपोनेंटड्यूपडेट" विधि का उपयोग कब करें?

Question

मैंने दर्जनों Reactफाइलें लिखीं , कभी भी componentDidUpdateविधि का उपयोग नहीं किया ।

क्या इस पद्धति का उपयोग करने की आवश्यकता का कोई विशिष्ट उदाहरण है?

मैं कुछ वास्तविक दुनिया उदाहरण चाहता हूं, एक साधारण डेमो नहीं।

जवाब के लिए धन्यवाद!

Comments

developmentarc.gitbooks.io/react-indepth/content/life_cycle/…

— इवान त्रिंबोली

एक साधारण मामला जब आप लोड पर घटक की प्रारंभिक स्थिति सेट करना चाहते हैं।

— राजेश

@ राजेश क्या आप इसे समझा सकते हैं या मुझे एक उदाहरण दे सकते हैं? धन्यवाद!

— स्लाइड शो 2

मुझे लगता है कि सबसे आम उपयोग-मामला तब होता है जब आपके पास अन्य लाइब्रेरीज़ (jQuery, डी 3 ...) होती हैं जो सीधे डोम पर काम करती हैं, रिएक्ट के साथ मिलकर। ऐसे परिदृश्यों में, यदि अन्य लाइब्रेरी को DOM ट्रांसफॉर्मेशन करने की आवश्यकता है, तो आपको React की छाया DOM को वास्तविक DOM में फ्लश कर दिया गया है यह सुनिश्चित करने के लिए कंपोनेंटड्यूपडेट का उपयोग करना चाहिए।

— जॉर्ज

@ जोर्ज की टिप्पणी पर विस्तार से बताने के लिए: मुझे लगता है कि रिएक्ट के अपडेट के बाद सबसे आम मामला असली डोम से READ होगा। उदाहरण के लिए, जब आप DOM तत्वों के सटीक आयाम, या व्यूपोर्ट में DOM तत्वों की स्थिति जानना चाहते हैं। उदाहरण के लिए एनिमेशन या बदलाव जिन्हें आप प्रबंधित करना चाहते हैं। मैं निश्चित रूप से प्रतिक्रिया देने के बाद DOM को बदलने के लिए jQuery का उपयोग करने के खिलाफ सलाह दूंगा। प्रतिक्रिया देने के बाद + एक और पुस्तकालय के एक ही टुकड़े को बदलना एक बुरा विचार है।

— विंटरवेल

Answer 1

एक सरल उदाहरण एक ऐसा ऐप होगा जो उपयोगकर्ता से इनपुट डेटा एकत्र करता है और फिर एक डेटा को डेटाबेस में अपलोड करने के लिए अजाक्स का उपयोग करता है। यहां एक सरलीकृत उदाहरण है (इसे न चलाएं - इसमें सिंटैक्स त्रुटियां हो सकती हैं):

export default class Task extends React.Component {
  
  constructor(props, context) {
    super(props, context);
    this.state = {
      name: "",
      age: "",
      country: ""
    };
  }

  componentDidUpdate() {
    this._commitAutoSave();
  }

  _changeName = (e) => {
    this.setState({name: e.target.value});
  }

  _changeAge = (e) => {
    this.setState({age: e.target.value});
  }

  _changeCountry = (e) => {
    this.setState({country: e.target.value});
  }

  _commitAutoSave = () => {
    Ajax.postJSON('/someAPI/json/autosave', {
      name: this.state.name,
      age: this.state.age,
      country: this.state.country
    });
  }

  render() {
    let {name, age, country} = this.state;
    return (
      <form>
        <input type="text" value={name} onChange={this._changeName} />
        <input type="text" value={age} onChange={this._changeAge} />
        <input type="text" value={country} onChange={this._changeCountry} />
      </form>
    );
  }
}

इसलिए जब भी कंपोनेंट में stateबदलाव होगा तो यह डेटा को ऑटोमैटिक कर देगा। इसे लागू करने के अन्य तरीके भी हैं। componentDidUpdateएक ऑपरेशन होने की जरूरत है जब विशेष रूप से उपयोगी है के बाद डोम अद्यतन किया जाता है और अद्यतन कतार खाली कर दिया है। यह शायद जटिल rendersऔर stateया डोम परिवर्तन पर सबसे उपयोगी है या जब आपको निष्पादित करने के लिए बिल्कुल अंतिम चीज़ होने की आवश्यकता होती है ।

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

मैंने इस फिडल पर एक डेमो बनाया साथ ही प्रदर्शित करने के लिए।

---

अधिक जानकारी के लिए, आधिकारिक डॉक्स देखें :

componentDidUpdate()अद्यतन होने के तुरंत बाद आह्वान किया जाता है। प्रारंभिक रेंडर के लिए इस विधि को नहीं कहा जाता है।

जब घटक अद्यतन किया गया है, तो इसे DOM पर संचालित करने के अवसर के रूप में उपयोग करें। यह नेटवर्क अनुरोधों को करने के लिए भी एक अच्छी जगह है क्योंकि जब तक आप वर्तमान प्रॉप्स की तुलना पिछले प्रॉप्स से करते हैं (उदाहरण के लिए यदि प्रॉम्प्स परिवर्तित नहीं हुए हैं तो नेटवर्क अनुरोध आवश्यक नहीं हो सकता है)।

Comments

मुझे लगता है this.setState({...}, callback), callbackबराबर _commitAutoSave, आपको क्या लगता है? इसलिए, मुझे लगता है कि यह मामला componentDidUpdateविधि का उपयोग कर सकता है , लेकिन मुझे सही नहीं होना चाहिए? fiddle

— स्लाइड शो

हां, आप कॉलबैक का उपयोग कर सकते हैं, हालांकि समस्या तब और अधिक हो जाती है जब उत्तराधिकार में कई सेटस्टेट्स होते हैं।

— क्रिस

आपके उत्तर के लिए धन्यवाद। तो, एक मामला उपयोग componentDidUpdateकरने के लिए कई setStates को हल करने के लिए है! कोई अन्य विचार?

— स्लाइड शो 2

@ नोवलिन मैं देख रहा हूं कि वे प्रतिक्रिया-ध्वनि घटक github.com/leoasis/react-sound/blob/master/src/index.js में इसका उपयोग करते हैं । मुझे यकीन नहीं है कि वे इसका उपयोग क्यों कर रहे हैं, लेकिन मुझे लगा कि मुझे लगा आप एक बार देख लेने के लिए लिंक साझा नहीं करेंगे।

— सारा

यह एक अच्छा उदाहरण है, लेकिन यह प्रतिक्रिया डॉक्स से एक महत्वपूर्ण सिफारिश को याद कर रहा है। "यह नेटवर्क अनुरोधों को करने के लिए भी एक अच्छा स्थान है, जब तक कि आप वर्तमान प्रॉप्स की तुलना पिछले प्रॉप्स (उदाहरण के लिए एक नेटवर्क रिक्वेस्ट आवश्यक नहीं हो सकता है अगर प्रॉप्स नहीं बदले हैं) से करें।" reactjs.org/docs/react-component.html#componentdidupdate इसी तरह, किसी को भी setStateसीडीयू में कॉल करते समय सशर्त लॉजिक में कॉल को लपेटना चाहिए ।

— TheUtherSide

Answer 2

कभी-कभी आप निर्माणकर्ता या कंपोनेंटडिमाउंट में प्रॉप्स से एक स्टेट वैल्यू जोड़ सकते हैं, आपको सेटस्टैट पर कॉल करना पड़ सकता है जब प्रॉप्स बदल जाता है लेकिन कंपोनेंट पहले ही माउंट हो चुका होता है इसलिए कंपोनेंटमाउंट निष्पादित नहीं होगा और न ही कंस्ट्रक्टर होगा; इस विशेष मामले में, आप प्रॉम्प्ट के बदलने के बाद से कंपोनेंटडीडप्यूटेट का उपयोग कर सकते हैं, आप नए प्रॉप्स के साथ कम्पोनेंटडीडप्यूटेट में सेटस्टेट को कॉल कर सकते हैं।

Answer 3

मैंने componentDidUpdate()हाईचर्ट में इस्तेमाल किया है।

यहाँ इस घटक का एक सरल उदाहरण है।

import React, { PropTypes, Component } from 'react';
window.Highcharts = require('highcharts');

export default class Chartline extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      chart: ''
    };
  }

  public componentDidUpdate() {
    // console.log(this.props.candidate, 'this.props.candidate')
    if (this.props.category) {
      const category = this.props.category ? this.props.category : {};
      console.log('category', category);
      window.Highcharts.chart('jobcontainer_' + category._id, {
        title: {
          text: ''
        },
        plotOptions: {
          series: {
            cursor: 'pointer'
          }
        },
        chart: {
          defaultSeriesType: 'spline'
        },
        xAxis: {
          // categories: candidate.dateArr,
          categories: ['Day1', 'Day2', 'Day3', 'Day4', 'Day5', 'Day6', 'Day7'],
          showEmpty: true
        },
        labels: {
          style: {
            color: 'white',
            fontSize: '25px',
            fontFamily: 'SF UI Text'
          }
        },
        series: [
          {
            name: 'Low',
            color: '#9B260A',
            data: category.lowcount
          },
          {
            name: 'High',
            color: '#0E5AAB',
            data: category.highcount
          },
          {
            name: 'Average',
            color: '#12B499',
            data: category.averagecount
          }
        ]
      });
    }
  }
  public render() {
    const category = this.props.category ? this.props.category : {};
    console.log('render category', category);
    return <div id={'jobcontainer_' + category._id} style={{ maxWidth: '400px', height: '180px' }} />;
  }
}

Answer 4

componentDidUpdate(prevProps){ 

    if (this.state.authToken==null&&prevProps.authToken==null) {
      AccountKit.getCurrentAccessToken()
      .then(token => {
        if (token) {
          AccountKit.getCurrentAccount().then(account => {
            this.setState({
              authToken: token,
              loggedAccount: account
            });
          });
        } else {
          console.log("No user account logged");
        }
      })
      .catch(e => console.log("Failed to get current access token", e));

    }
}

Answer 5

जैसे ही अपडेट होता है, यह जीवन चक्र विधि लागू होती है। कंपोनेंटड्यूपडेट () विधि के लिए सबसे आम उपयोग मामला प्रोप या राज्य परिवर्तनों के जवाब में डोम को अपडेट कर रहा है।

आप इस जीवनचक्र में setState () को कॉल कर सकते हैं, लेकिन ध्यान रखें कि आपको पिछली स्थिति से स्थिति की जाँच करने या उसे परिवर्तित करने की स्थिति में इसे लपेटने की आवश्यकता होगी। सेटस्टेट () के गलत उपयोग से अनंत लूप बन सकता है। नीचे दिए गए उदाहरण पर एक नज़र डालें जो इस जीवन चक्र विधि का एक विशिष्ट उपयोग उदाहरण दिखाता है।

componentDidUpdate(prevProps) {
 //Typical usage, don't forget to compare the props
 if (this.props.userName !== prevProps.userName) {
   this.fetchData(this.props.userName);
 }
}

उपर्युक्त उदाहरण में ध्यान दें कि हम वर्तमान प्रॉपर की तुलना पिछले प्रॉप्स से कर रहे हैं। यह जांचना है कि क्या वर्तमान में प्रॉप्स में बदलाव हुआ है या नहीं। इस स्थिति में, अगर एपीआई नहीं बदली तो API कॉल करने की आवश्यकता नहीं होगी।

अधिक जानकारी के लिए, आधिकारिक डॉक्स देखें :

Comments

के मामले में क्या करना है this.fetchData is not a function?

— टॉमहेल

tomrlh यह एक फंक्शन कॉल है

— काशिफ

Answer 6

जब राज्य में कुछ बदल गया है और आपको एक साइड इफेक्ट (जैसे एपीआई के लिए एक अनुरोध - प्राप्त करना, डाल देना, पोस्ट करना, हटाना) कॉल करना होगा। इसलिए आपको कॉल करने की आवश्यकता है componentDidUpdate()क्योंकिcomponentDidMount() पहले से ही कहा जाता है।

ComponentsDidUpdate () में साइड इफेक्ट कॉल करने के बाद, आप प्रतिक्रिया डेटा के आधार पर राज्य को नए मूल्य पर सेट कर सकते हैं then((response) => this.setState({newValue: "here"}))। कृपया सुनिश्चित करें कि आपको जांचने की आवश्यकता है prevPropsयाprevState अनंत लूप से बचने के लिए क्योंकि राज्य को नए मूल्य पर सेट करते समय, घटकडेपडेट () फिर से कॉल करेगा।

सर्वोत्तम अभ्यास के लिए साइड इफेक्ट को कॉल करने के लिए 2 स्थान हैं - कंपोनेंटडिमाउंट () और कंपोनेंटड्यूपडेट ()