Lifecycle (लाईफ साईकल)

रियाक्टमा सम्पुर्ण कम्पोनेन्टहरुले बिभिन्न चरण पार गर्ने गर्दछन त्यसलाई नै लाईफसाईकल गर्दछ । यद्दपी यसमा कुन पनि कुन चरणमा जाने भनेर एउटा निश्चीत नियम हुन्छ । componenetDidMount, componentWillMount आदी रियाक्ट लाईफ साईकलका उदारण हुन ।

class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = { favoritecolor: "red" };
  }
  componentDidMount() {
    setTimeout(() => {
      this.setState({ favoritecolor: "yellow" });
    }, 1000);
  }
  render() {
    return <h1>My Favorite Color is {this.state.favoritecolor}</h1>;
  }
}

ReactDOM.render(<Header />, document.getElementById("root"));

कोडपेनमा हेर्न यहाँ क्लिक गर्नुहोला ।

रियाक्टजेस को अफिसियल वेबसाईठमा लाईफ साइकलको बारेमा राम्रो उदारण दिएको छ । यसलाई हेरौ ।

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = { date: new Date() };
  }
  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}
ReactDOM.render(<Clock />, document.getElementById("root"));

माथीको उदारणलाई कोडपेनमा हेर्ने हो भने यसले कम्पोनेन्ट एक्जुक्युट भएको समय (current time) मात्र देखाउछ । यसलाई जिवन्तता प्रदान गर्नको लागी लाईफसाईकलको प्रयोग गर्न सकिन्छ ।

माथिको उदारणमा हामीले रियाक्ट डोम मा clock भन्ने कम्पोनेन्ट पहिलो पटक रेन्डर गर्दा टाईमेर सेटअप गरेका थियौ । रियाक्टजेएस मा यसलाई माउन्टिङ्ग (componentDidMount) भनिन्छ । कुनै अवश्था उक्त टाईमरलाई सबन्द गर्नु पर्ने पनि हुन्छ त्यसलाई रियाक्टमा अनमाउन्टिङ्ग (componentWillUnmount) भनिन्छ । यि दुबै मेथडहरुलाई क्लास भित्र राख्न पर्छ ।

componentDidMount() {

}
componentWillUnmount() {

}

माथि उल्लेखीत नामका मेथडहरुलाई लाईफसाईकल मेथड भनिन्छ । डोममा कम्पोनेन्टको आउटपुट रेन्डर हुदाँ componentDidMount() भन्ने मेथड एक्जीक्युट हुन्छ भने त्यसलाई स्थगित गर्नु पर्दा componentWillUnmount() मेथडको प्रयोग गरीन्छ ।e

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = { date: new Date() };
  }

  componentDidMount() {
    this.timerID = setInterval(() => this.tick(), 1000);
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({
      date: new Date()
    });
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}
ReactDOM.render(<Clock />, document.getElementById("root"));

सबैभन्दा पहिलो उदारणमा करेन्ट टाईम देखाउथ्यो भने सबैभन्दा अन्तिमको उदारणमा करेन्ट टाइम आफै अपडेट भइ रहेको देखीन्छ । यो नै रियाक्ट लाइफसाईकलको राम्रो उदारण हो ।