ReactJS - घटक जीवनचक्र विधियाँ

रिएक्ट घटकों में घटनाओं का एक जीवनचक्र होता है, जो उनके बनने से लेकर नष्ट होने तक चलता है। ये जीवनचक्र घटनाएँ डेवलपर्स को विभिन्न बिंदुओं पर एक घटक के जीवनचक्र में शामिल होने और कुछ क्रियाएं करने की अनुमति देती हैं।

यहां रिएक्ट घटक के मुख्य जीवनचक्र तरीके हैं, साथ ही प्रत्येक का संक्षिप्त विवरण और उनका उपयोग कैसे किया जा सकता है इसका एक उदाहरण है:

constructor(): किसी घटक को माउंट करने (DOM में सम्मिलित करने) से पहले इस विधि को कॉल किया जाता है। इसका उपयोग स्टेट को इनिशियलाइज़ करने और इवेंट हैंडलर को बाइंड करने के लिए किया जाता है।

उदाहरण:

constructor(props) {
  super(props);
  this.state = { count: 0 };
  this.handleClick = this.handleClick.bind(this);
}

उदाहरण:

componentDidMount() {
  axios.get('/items')
    .then(response => this.setState({ items: response.data }));
}

उदाहरण:

shouldComponentUpdate(nextProps, nextState) {
  return nextState.count !== this.state.count;
}

उदाहरण:

componentDidUpdate(prevProps, prevState) {
  if (prevState.count !== this.state.count) {
    axios.post('/update-count', { count: this.state.count });
  }
}

उदाहरण:

componentWillUnmount() {
  window.removeEventListener('resize', this.handleResize);
}

render() {
  return (
    <div>
      <h1>Hello, World!</h1>
      <button onClick={this.handleClick}>Click me</button>
    </div>
  );
}

यहाँ मुख्य रिएक्ट घटक जीवनचक्र विधियों का सारांश दिया गया है:

• constructor(): राज्य को आरंभ करता है और ईवेंट हैंडलर को बांधता है। किसी घटक को माउंट करने से पहले कॉल किया जाता है।
• componentDidMount(): घटक के रेंडर होने के बाद एक क्रिया या एपीआई कॉल को ट्रिगर करता है। घटक माउंट होने के बाद कॉल किया जाता है।
• shouldComponentUpdate(): एक बूलियन लौटाता है जो इंगित करता है कि घटक को अद्यतन किया जाना चाहिए या नहीं। किसी घटक को फिर से रेंडर करने से पहले कॉल किया जाता है।
• componentDidUpdate(): घटक अद्यतन होने के बाद एक क्रिया या एपीआई कॉल ट्रिगर करता है। घटक अद्यतन होने के बाद कॉल किया गया।
• componentWillUnmount(): संसाधनों या ईवेंट श्रोताओं को साफ़ करें। किसी घटक के नष्ट होने से ठीक पहले कॉल किया जाता है।
• render(): एक घटक के लिए JSX को रेंडर करता है। जब भी घटक को फिर से प्रस्तुत करने की आवश्यकता होती है, तब कॉल किया जाता है।