React
प्रतिक्रिया घटक जीवनचक्र

परिचय

घटक निर्माण

जब एक प्रतिक्रिया घटक बनाया जाता है, तो कई प्रकार के कार्य कहलाते हैं:

• यदि आप React.createClass ( React.createClass ) का उपयोग कर रहे हैं, तो 5 उपयोगकर्ता परिभाषित फ़ंक्शन कहलाते हैं
• यदि आप class Component extends React.Component का उपयोग कर रहे हैं, तो class Component extends React.Component (ES6) का class Component extends React.Component , 3 उपयोगकर्ता परिभाषित फ़ंक्शन कहलाते हैं

getDefaultProps() (केवल getDefaultProps() )

यह पहली विधि कहलाती है।

इस फ़ंक्शन द्वारा लौटाए गए मूल मानों को डिफॉल्ट के रूप में उपयोग किया जाएगा यदि वे घटक के त्वरित होने पर परिभाषित नहीं किए जाते हैं।

निम्नलिखित उदाहरण में, अगर यह अन्यथा निर्दिष्ट नहीं है, तो यह this.props.name Bob डिफ़ॉल्ट हो जाएगा:

getDefaultProps() {
  return {
    initialCount: 0,
    name: 'Bob'
  };
}

getInitialState() (केवल getInitialState() )

यह दूसरी विधि कहलाती है।

getInitialState() का रिटर्न वैल्यू रिएक्ट घटक की प्रारंभिक स्थिति को परिभाषित करता है। रिएक्ट फ्रेमवर्क इस फ़ंक्शन को कॉल करेगा और this.state रिटर्न वैल्यू असाइन this.state ।

निम्न उदाहरण में, this.state.count के मूल्य के साथ intialized किया जाएगा this.props.initialCount :

getInitialState() {
  return {
    count : this.props.initialCount
  };
}

componentWillMount() (ES5 और ES6)

यह तीसरी विधि कहलाती है।

इस फ़ंक्शन का उपयोग घटक में अंतिम परिवर्तन करने से पहले किया जा सकता है क्योंकि इसे DOM में जोड़ा जाएगा।

componentWillMount() {
  ...
}

render() (ES5 और ES6)

यह चौथा तरीका कहा जाता है।

render() फ़ंक्शन घटक की स्थिति और प्रॉपर का शुद्ध कार्य होना चाहिए। यह एक एकल तत्व देता है जो रेंडरिंग प्रक्रिया के दौरान घटक का प्रतिनिधित्व करता है और या तो एक मूल डोम घटक (जैसे <p /> ) या एक मिश्रित घटक का प्रतिनिधित्व होना चाहिए। यदि कुछ भी प्रदान नहीं किया जाना चाहिए, तो यह null या undefined लौट सकता है।

इस फ़ंक्शन को घटक के प्रॉप्स या राज्य में किसी भी परिवर्तन के बाद वापस बुलाया जाएगा।

render() {
  return (
    <div>
      Hello, {this.props.name}!
    </div>
  );
}

घटकडामाउंट componentDidMount() (ES5 और ES6)

यह पांचवीं विधि कहलाती है।

घटक को माउंट किया गया है और अब आप घटक के DOM नोड्स को एक्सेस करने में सक्षम हैं, उदाहरण के लिए refs माध्यम से।

इस विधि का उपयोग किया जाना चाहिए:

• टाइमर तैयार करना
• डेटा लाया जा रहा है
• इवेंट श्रोताओं को जोड़ना
• DOM तत्वों में हेरफेर

componentDidMount() {
  ...
}

ईएस 6 सिंटेक्स

यदि घटक ES6 वर्ग सिंटैक्स का उपयोग करके परिभाषित किया गया है, तो फ़ंक्शन getDefaultProps() और getInitialState() उपयोग नहीं किया जा सकता है।

इसके बजाय, हम अपने defaultProps को वर्ग पर एक स्थिर संपत्ति के रूप में घोषित करते हैं, और हमारी कक्षा के निर्माता में राज्य के आकार और प्रारंभिक स्थिति की घोषणा करते हैं। इन दोनों को निर्माण के समय कक्षा के उदाहरण पर सेट किया जाता है, इससे पहले कि कोई अन्य रिएक्ट जीवनचक्र फ़ंक्शन कहलाए।

निम्न उदाहरण इस वैकल्पिक दृष्टिकोण को प्रदर्शित करता है:

class MyReactClass extends React.Component {
  constructor(props){
    super(props);

    this.state = {
      count: this.props.initialCount
    };
  }
  
  upCount() {
    this.setState((prevState) => ({
      count: prevState.count + 1
    }));
  }
  
  render() {
    return (
      <div>
        Hello, {this.props.name}!<br />
        You clicked the button {this.state.count} times.<br />
        <button onClick={this.upCount}>Click here!</button>
      </div>
    );
  }
}

MyReactClass.defaultProps = {
  name: 'Bob',
  initialCount: 0
};

getDefaultProps() जगह

घटक प्रॉप्स के लिए डिफ़ॉल्ट मान वर्ग की defaultProps सेट करके निर्दिष्ट किए जाते हैं:

MyReactClass.defaultProps = {
  name: 'Bob',
  initialCount: 0
};

getInitialState() प्रतिस्थापित getInitialState()

घटक की प्रारंभिक स्थिति को सेट करने के लिए मुहावरेदार तरीका यह है कि this.state में यह स्थापित करें:

constructor(props){
  super(props);

  this.state = {
    count: this.props.initialCount
  };
}

घटक अद्यतन

componentWillReceiveProps(nextProps)

यह पहला फ़ंक्शन है जिसे गुणों में परिवर्तन कहा जाता है ।

जब घटक के गुण बदलते हैं , तो प्रतिक्रिया नए गुणों के साथ इस फ़ंक्शन को कॉल करेगी। आप इस के साथ पुराने प्रॉप्स तक पहुँच सकते हैं। अगले और अगले प्रॉप्स के साथ नए प्रॉप्स के लिए।

इन चरों के साथ, आप पुराने और नए प्रॉप्स या कॉल फ़ंक्शन के बीच कुछ तुलनात्मक संचालन कर सकते हैं क्योंकि एक संपत्ति में बदलाव, आदि।

componentWillReceiveProps(nextProps){
  if (nextProps.initialCount && nextProps.initialCount > this.state.count){
    this.setState({
      count : nextProps.initialCount
    });
  }
}

shouldComponentUpdate(nextProps, nextState)

यह गुण परिवर्तन और राज्य परिवर्तनों पर पहला कहा जाने वाला दूसरा कार्य है ।

डिफ़ॉल्ट रूप से, यदि कोई अन्य घटक / आपका घटक आपके घटक की एक संपत्ति / स्थिति को बदलता है, तो रिएक्ट आपके घटक के एक नए संस्करण को प्रस्तुत करेगा। इस मामले में, यह फ़ंक्शन हमेशा सही रहता है।

आप इस फ़ंक्शन को ओवरराइड कर सकते हैं और अधिक सटीक रूप से चुन सकते हैं कि आपके घटक को अपडेट करना चाहिए या नहीं ।

यह फ़ंक्शन ज्यादातर अनुकूलन के लिए उपयोग किया जाता है।

फ़ंक्शन गलत होने की स्थिति में, अद्यतन पाइपलाइन तुरंत बंद हो जाती है ।

componentShouldUpdate(nextProps, nextState){
  return this.props.name !== nextProps.name ||
    this.state.count !== nextState.count;
}

componentWillUpdate(nextProps, nextState)

यह फ़ंक्शन componentWillMount() तरह काम करता है। परिवर्तन डोम में नहीं हैं , इसलिए आप अपडेट करने से ठीक पहले कुछ बदलाव कर सकते हैं।

/! \: आप इस का उपयोग नहीं कर सकते। शुरू ()

componentWillUpdate(nextProps, nextState){}

render()

कुछ परिवर्तन हैं, इसलिए घटक को फिर से प्रस्तुत करें।

componentDidUpdate(prevProps, prevState)

ComponentsDidMount componentDidMount() रूप में एक ही सामान: DOM को रिफ्रेश किया जाता है , इसलिए आप यहाँ DOM पर कुछ काम कर सकते हैं।

componentDidUpdate(prevProps, prevState){}

घटक निकालना

componentWillUnmount()

डीओएम से एक घटक के अनमाउंट होने से पहले इस विधि को कहा जाता है।

यह सफाई कार्यों को करने के लिए एक अच्छी जगह है:

• ईवेंट श्रोताओं को हटाना।
• समाशोधन समय।
• कुर्सियां रोकना।
• Redux राज्यों की सफाई।

componentWillUnmount(){
  ...
}

componentWillUnMount में अटैच इवेंट इवेंट श्रोता को हटाने का एक उदाहरण

import React, { Component } from 'react';

export default class SideMenu extends Component {

  constructor(props) {
    super(props);
    this.state = {
        ...
      };
    this.openMenu = this.openMenu.bind(this);
    this.closeMenu = this.closeMenu.bind(this);
  }

  componentDidMount() {
    document.addEventListener("click", this.closeMenu);
  }

  componentWillUnmount() {
    document.removeEventListener("click", this.closeMenu);
  }

  openMenu() {
    ...
  }

  closeMenu() {
    ...
  }

  render() {
    return (
      <div>
        <a
          href      = "javascript:void(0)"
          className = "closebtn"
          onClick   = {this.closeMenu}
        >
          ×
        </a>
        <div>
          Some other structure
        </div>
      </div>
    );
  }
}

प्रतिक्रिया घटक कंटेनर

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

// Container component
import React, { Component } from 'react';
import Api from 'path/to/api';

class CommentsListContainer extends Component {
    constructor() {
        super();
        // Set initial state
        this.state = { comments: [] }
    }

    componentDidMount() {
        // Make API call and update state with returned comments
        Api.getComments().then(comments => this.setState({ comments }));
    }

    render() {
        // Pass our state comments to the presentational component
        return (
            <CommentsList comments={this.state.comments} />;
        );
    }
}

// Presentational Component
const CommentsList = ({ comments }) => (
    <div>
        {comments.map(comment => (
            <div>{comment}</div>
        )}
    </div>
);

CommentsList.propTypes = {
    comments: React.PropTypes.arrayOf(React.PropTypes.string)
}

विभिन्न राज्यों में जीवनचक्र विधि कॉल

यह उदाहरण अन्य उदाहरणों के पूरक के रूप में कार्य करता है जो जीवन चक्र के तरीकों का उपयोग करने के तरीके के बारे में बात करते हैं और जब विधि को बुलाया जाएगा।

यह उदाहरण संक्षेप में बताता है कि कौन-सी विधियाँ (ComponentsWillMount, ComponentsWillReceiveProps, आदि) कहलाएँगी और किस क्रम में अलग-अलग राज्यों में एक घटक के लिए भिन्न होगा:

जब एक घटक को इनिशियलाइज़ किया जाता है:

1. getDefaultProps
2. getInitialState
3. componentWillMount
4. प्रस्तुत करना
5. componentDidMount

जब एक घटक राज्य बदल गया है:

1. shouldComponentUpdate
2. componentWillUpdate
3. प्रस्तुत करना
4. componentDidUpdate

जब एक घटक बदल गया है:

1. componentWillReceiveProps
2. shouldComponentUpdate
3. componentWillUpdate
4. प्रस्तुत करना
5. componentDidUpdate

जब एक घटक अनमाउंट है:

1. componentWillUnmount