Ixazululiwe: sabela noma

-
Impela! Nasi isiqalo se-athikili yakho ye-React based JavaScript.

Ukuqonda ukusebenza kwangaphakathi kwe-React kubalulekile kunoma ubani osebenza nalo mtapo wezincwadi we-JavaScript kakhulu. I-React iwumthombo ovulekile, isiphetho esingaphambili, umtapo wezincwadi we-JavaScript osetshenziswa ekudizayineni izixhumanisi zomsebenzisi zezinhlelo zokusebenza zekhasi elilodwa. Isendlalelo sokubuka kumodeli ye-MVC (Model-View-Controller).

I-React ivumela abathuthukisi ukuthi bakhe izinhlelo zokusebenza ezinkulu zewebhu ezingashintsha idatha, ngaphandle kokulayisha kabusha ikhasi. Iyashesha kakhulu futhi iyakhula. Kodwa, kungase kube nzima kakhulu lapho izinkinga zivela. Kulesi sihloko, sizohlukanisa inkinga eyodwa evamile futhi sinikeze isisombululo.

Inkinga Ejwayelekile Ekuphenduleni

Akuvamile, ikakhulukazi kwabaqalayo, ukuhlangabezana nezinkinga ngokudluliswa kwedatha phakathi kwezingxenye. Lokhu kubalulekile njengoba inhloso enkulu ye-React iwukwakha izingxenye ze-UI; kubalulekile ukuthi izingxenye, kungaba umzali nengane, ingane nomzali, noma ingane yakini nezelamani, zixhumane. Kodwa singakufeza kanjani lokhu?

Isixazululo Senkinga

Ukuze sixazulule lokhu, sidinga ukuqonda umqondo owodwa oyisisekelo mayelana ne-React: ukugeleza kwedatha. Ku-React, idatha idluliswa phezulu phansi (umzali kuye enganeni) ngezinsiza. Kodwa kuthiwani uma sidinga ukudlulisa idatha isuka enganeni ibuyele kumzali wayo? Kulapho sisebenzisa khona umqondo ohlakaniphile ku-React - Functions as Props.

Nakhu ukuthi isebenza kanjani:

// Parent Component
class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      field: ''
    };
  }

  handleChange = (newData) => {
    this.setState({ field: newData});
  }

  render() {
    return (
      <div>
        <ChildComponent onChange={this.handleChange} />
      </div>
    );
  }
}

// Child Component
class ChildComponent extends React.Component {
  sendData = () => {
   this.props.onChange("Hello, parent!!"); 
  };

  render() {
    return (
      <div>
        <button onClick={this.sendData}>Click me!</button>
      </div>
    )
  }
}

Esibonelweni esingenhla, Engxenyeni Yomzali sichaza umsebenzi, handleShintsha obiza le.setState() ukuze ibuyekeze idatha yezwe. Lo msebenzi ube usudluliswa njenge-prop, Engxenyeni Yengane.

Amalabhulali Asabelayo Wokuphatha Ukugeleza Kwedatha

Nakuba isistimu eyakhelwe ngaphakathi ye-React yokuphatha ama-props inamandla, onjiniyela abaningi bafuna izixazululo ezingaka zokuphatha ukugeleza kwedatha ezinhlelweni ezinkulu. I-Redux ne-Mobx yimitapo yolwazi ye-JavaScript emibili esetshenziswa ne-React enikeza ukuphathwa kwezwe okuthuthukile.

  • I-Redux iyisitsha sesimo esingabikezelwa sezinhlelo zokusebenza ze-JavaScript ngokususelwe kuphethini yokuklama ye-Flux. Ivumela unjiniyela ukuthi aphathe isimo sohlelo lokusebenza ngendlela ebikezelwayo.
  • I-Mobx iwumtapo wezincwadi oqonde kakhudlwana owenza izimiso ezifanayo ze-Flux kodwa ngendlela ecatshangwayo elula ngokusebenzisa uhlelo olusebenzayo olusebenzayo.

Ukusonga izinto, i-React ihlinzeka ngendlela elula, esebenzayo yokuthi izingxenye zixhumane kusetshenziswa ama-props nemisebenzi. Kuzinhlelo zokusebenza ezinkulu, ukusebenzisa imitapo yolwazi enamandla njenge-Redux noma i-Mobx kungenza ukuphathwa kwezwe kube lula. Qhubeka uhlole futhi ujabule ngokubhala amakhodi!

Okuthunyelwe okuhlobene:

Shiya amazwana