Class Components in React - Components with State and Lifecycle Methods

React waa library frontend oo awood badan oo u fududeysa horumariyeyaasha inay abuuraan interfaces isticmaale (UI) oo isdhexgal leh. Marka laga soo tago Functional Components, oo aynu horay uga soo hadalnay, React waxay leedahay nooc kale oo loo yaqaan Class Components. Class Components waxay yihiin kuwa awood u leh inay maareeyaan state iyo inay adeegsadaan lifecycle methods si loo xakameeyo habdhaqanka components-ka xilliyada kala duwan ee noloshooda.

Class Components in React
 Class Components in React

Waa Maxay Class Components?

Class Components waa components React ah oo ku qoran fasallo (classes) oo leh habab u gaar ah. Si ka duwan Functional Components, kuwaas oo kaliya u adeegsanaya props si ay u soo bandhigaan xogta, Class Components waxay awood u leeyihiin inay maareeyaan state, taasoo ka dhigaysa kuwo aad u xoog badan oo lagu habboon yahay codsiyo adag.

Waxaa si sahlan lagu abuuri karaa Class Component adoo isticmaalaya fasalka JavaScript iyo extends React.Component si uu u dhaxlo dhammaan sifooyinka iyo hawlaha React Component.

jsx

import React, { Component } from 'react';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
  }

  render() {
    return (
      <div>
        <h1>Count: {this.state.count}</h1>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Increment
        </button>
      </div>
    );
  }
}

export default MyComponent;

Fasalkan kor ku xusan, MyComponent waa Class Component. Waxay leedahay state count, oo lagu kaydiyo tirada hadda jirta. setState waa habka lagula xiriiro state, si loo cusboonaysiiyo iyadoo aan si toos ah u beddelin. Markasta oo setState la isticmaalo, React dib ayuu u render gareeyaa component-ka si uu u muujiyo isbeddelka cusub ee state-ka.

Lifecycle Methods

Mid ka mid ah faa'iidooyinka ugu waaweyn ee Class Components waa adeegsiga lifecycle methods. Lifecycle methods waa habab gaar ah oo la bilaabo marka component-ka React uu maro xaalado kala duwan oo noloshiisa ah, sida marka la abuuro (mount), la cusboonaysiiyo (update), ama la burburiyo (unmount).

ComponentDidMount iyo ComponentDidUpdate waa laba ka mid ah lifecycle methods ee caanka ah:

  1. componentDidMount() - Waxaa la wacaa marka component-ka si guul leh loo render gareeyo markii ugu horreysay. Waxaa loo isticmaalaa inaad ku samayso isdhexgalal xogta backend ama inaad samayso waxyaabo kale sida xisaabinta cabbirada shaashadda.

  2. componentDidUpdate(prevProps, prevState) - Waxaa la wacaa mar kasta oo component-ku uu cusboonaysiiyo, kadib markuu state ama props isbeddelo. Waxay u fiican tahay haddii aad rabto inaad ka falceliso isbeddelada cusub.

  3. componentWillUnmount() - Waxaa la wacaa ka hor inta aan component-ka laga saarin DOM-ka. Waxaa loo isticmaalaa in lagu nadiifiyo ilaha, sida baajinta event listeners ama timers.

Tusaale ahaan, waxaan arki karnaa sida loo isticmaalo componentDidMount si loo soo qaado xog marka component-ka uu dhaco:

jsx

import React, { Component } from 'react';

class DataFetcher extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: null,
    };
  }

  componentDidMount() {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => this.setState({ data }));
  }

  render() {
    return (
      <div>
        {this.state.data ? (
          <div>{this.state.data.name}</div>
        ) : (
          <div>Loading...</div>
        )}
      </div>
    );
  }
}

export default DataFetcher;

DataFetcher waa Class Component oo soo jiidaya xogta API marka uu ku dhacayo (mount). Marka xogta la helo, waxaa lagu cusboonaysiiyaa state-ka adigoo isticmaalaya setState, taas oo sababi doonta dib u render-gareynta component-ka oo muujin doona xogta cusub.

Gunaanad

Class Components waa qayb muhiim ah oo ka mid ah horumarinta React, gaar ahaan marka la isticmaalayo state iyo lifecycle methods si loo xakameeyo habdhaqanka components-ka. Inkastoo Functional Components iyo React Hooks ay aad caan u noqdeen, Class Components wali waa kuwo awood badan oo waxtar leh, gaar ahaan codsiyada waaweyn ee leh shaqooyin adag. Si aad u noqoto horumariye React ah oo buuxa, waa muhiim inaad fahamto labada nooc ee components-ka iyo sida ay u kala duwan yihiin.


Tags
Previous Post Next Post