Kuweka Components Zikiwa Pure

Baadhi ya functions za JavaScript ni pure (safi). Pure functions hufanya hesabu tu na si zaidi ya hilo. Kwa kuandika components zako kwa kufuata kikamilifu kanuni za pure functions, unaweza kuepuka aina nzima ya bugs zinazochanganya na tabia isiyotabirika kadri msimbo wako unavyokua. Ili kupata manufaa haya, hata hivyo, kuna kanuni chache lazima uzifuate.

You will learn

Purity ni nini na jinsi inavyokusaidia kuepuka bugs
Jinsi ya kuweka components zikiwa pure kwa kuweka mabadiliko nje ya awamu ya render
Jinsi ya kutumia Strict Mode kupata makosa katika components zako

Purity: Components kama fomula

Katika sayansi ya kompyuta (na hasa ulimwengu wa functional programming), pure function ni function yenye sifa zifuatazo:

Inashughulikia mambo yake yenyewe. Haibadilishi objects au vigezo vyovyote vilivyokuwepo kabla haijaitwa.
Ingizo lilelile, matokeo yaleyale. Ikipewa maingizo yaleyale, pure function inapaswa kurudisha matokeo yaleyale kila mara.

Huenda tayari umeshajua mfano mmoja wa pure functions: fomula katika hisabati.

Fikiria fomula hii ya hisabati: y = 2x.

Kama x = 2 basi y = 4. Kila mara.

Kama x = 3 basi y = 6. Kila mara.

Kama x = 3, y haitakuwa mara nyingine 9 au –1 au 2.5 kutegemea saa ya siku au hali ya soko la hisa.

Kama y = 2x na x = 3, y kila mara itakuwa 6.

Kama tungeigeuza hii kuwa function ya JavaScript, ingeonekana hivi:

function double(number) {
  return 2 * number;
}

Katika mfano ulio hapo juu, double ni pure function. Ukiipitisha 3, itarudisha 6. Kila mara.

React imeundwa kuzunguka dhana hii. React inadhani kuwa kila component unayoiandika ni pure function. Hii inamaanisha kuwa components za React unazoandika lazima kila mara zirudishe JSX ileile ikipewa maingizo yaleyale:

Fork

function Recipe({ drinkers }) {
  return (
    <ol>
      <li>Chemsha vikombe {drinkers} vya maji.</li>
      <li>Ongeza vijiko {drinkers} vya chai na vijiko {0.5 * drinkers} vya viungo.</li>
      <li>Ongeza vikombe {0.5 * drinkers} vya maziwa vichemke na sukari kwa ladha.</li>
    </ol>
  );
}

export default function App() {
  return (
    <section>
      <h1>Kichocheo cha Chai ya Viungo</h1>
      <h2>Kwa wawili</h2>
      <Recipe drinkers={2} />
      <h2>Kwa kusanyiko</h2>
      <Recipe drinkers={4} />
    </section>
  );
}

Unapopitisha drinkers={2} kwa Recipe, itarudisha JSX yenye vikombe 2 vya maji. Kila mara.

Ukipitisha drinkers={4}, itarudisha JSX yenye vikombe 4 vya maji. Kila mara.

Kama fomula ya hisabati tu.

Ungeweza kufikiria components zako kama vichocheo (mapishi): ukivifuata na usiongeze viambato vipya wakati wa upishi, utapata sahani ileile kila mara. “Sahani” hiyo ni JSX ambayo component huitolea React ili i-render.

A tea recipe for x people: take x cups of water, add x spoons of tea and 0.5x spoons of spices, and 0.5x cups of milk

Side Effects: matokeo (yasiyo)kusudiwa

Mchakato wa ku-render wa React lazima kila mara uwe pure. Components zinapaswa kurudisha JSX yao tu, na si kubadilisha objects au vigezo vyovyote vilivyokuwepo kabla ya ku-render—hilo lingezifanya kuwa impure!

Hapa kuna component inayovunja kanuni hii:

Fork

let guest = 0;

function Cup() {
  // Baya: kubadilisha kigezo kilichokuwepo tayari!
  guest = guest + 1;
  return <h2>Kikombe cha chai kwa mgeni #{guest}</h2>;
}

export default function TeaSet() {
  return (
    <>
      <Cup />
      <Cup />
      <Cup />
    </>
  );
}

Component hii inasoma na kuandika kigezo cha guest kilichotangazwa nje yake. Hii inamaanisha kuwa kuita component hii mara nyingi kutazalisha JSX tofauti! Na zaidi ya hayo, kama components nyingine zitasoma guest, zitazalisha JSX tofauti pia, kutegemea zilipo-render lini! Hilo halitabiriki.

Tukirudi kwenye fomula yetu y = 2x, sasa hata kama x = 2, hatuwezi kuamini kuwa y = 4. Vipimo vyetu vingeweza kufeli, watumiaji wetu wangechanganyikiwa, ndege zingeanguka kutoka angani—unaweza kuona jinsi hili lingeweza kusababisha bugs zinazochanganya!

Unaweza kurekebisha component hii kwa kupitisha guest kama prop badala yake:

Fork

function Cup({ guest }) {
  return <h2>Kikombe cha chai kwa mgeni #{guest}</h2>;
}

export default function TeaSet() {
  return (
    <>
      <Cup guest={1} />
      <Cup guest={2} />
      <Cup guest={3} />
    </>
  );
}

Sasa component yako ni pure, kwa kuwa JSX inayorudisha inategemea prop ya guest pekee.

Kwa ujumla, hupaswi kutarajia components zako zi-render kwa mpangilio wowote maalum. Haijalishi kama unaita y = 2x kabla au baada ya y = 5x: fomula zote mbili zitatatuliwa bila kutegemeana. Kwa njia ileile, kila component inapaswa “kufikiri yenyewe tu”, na isijaribu kuratibu na au kutegemea nyingine wakati wa ku-render. Ku-render ni kama mtihani wa shule: kila component inapaswa kuhesabu JSX yenyewe!

Deep Dive

Kugundua hesabu impure kwa StrictMode

Ingawa huenda bado hujazitumia zote, katika React kuna aina tatu za maingizo unayoweza kusoma wakati wa ku-render: props, state (hali), na context. Unapaswa kila mara kuyachukulia maingizo haya kama ya kusoma-tu.

Unapotaka kubadilisha kitu kwa kujibu ingizo la mtumiaji, unapaswa kuweka state badala ya kuandika kwenye kigezo. Kamwe usibadilishe vigezo au objects vilivyokuwepo tayari wakati component yako inapo-render.

React inatoa “Strict Mode” ambamo inaita function ya kila component mara mbili wakati wa uendelezaji. Kwa kuita functions za components mara mbili, Strict Mode husaidia kupata components zinazovunja kanuni hizi.

Angalia jinsi mfano wa awali ulivyoonyesha “Guest #2”, “Guest #4”, na “Guest #6” badala ya “Guest #1”, “Guest #2”, na “Guest #3”. Function ya awali ilikuwa impure, kwa hivyo kuiita mara mbili kuliivunja. Lakini toleo lililorekebishwa lililo pure hufanya kazi hata kama function itaitwa mara mbili kila wakati. Pure functions huhesabu tu, kwa hivyo kuziita mara mbili hakutabadilisha chochote—kama vile kuita double(2) mara mbili hakubadilishi kinachorudishwa, na kutatua y = 2x mara mbili hakubadilishi y ilivyo. Maingizo yaleyale, matokeo yaleyale. Kila mara.

Strict Mode haina athari katika production, kwa hivyo haitapunguza kasi ya programu kwa watumiaji wako. Ili kuchagua kutumia Strict Mode, unaweza kufunga component yako ya mzizi ndani ya <React.StrictMode>. Baadhi ya frameworks hufanya hivi kwa chaguo-msingi.

Mabadiliko ya ndani: Siri ndogo ya component yako

Katika mfano ulio hapo juu, tatizo lilikuwa kwamba component ilibadilisha kigezo kilichokuwepo tayari wakati wa ku-render. Hili mara nyingi huitwa “mutation” ili lisikike la kutisha kidogo zaidi. Pure functions hazibadilishi vigezo vilivyo nje ya wigo wa function au objects vilivyoundwa kabla ya wito—hilo huzifanya kuwa impure!

Hata hivyo, ni sawa kabisa kubadilisha vigezo na objects ambavyo umeviunda hivi punde wakati wa ku-render. Katika mfano huu, unaunda array ya [], unaiweka kwenye kigezo cha cups, kisha una-push vikombe kadhaa ndani yake:

Fork

function Cup({ guest }) {
  return <h2>Kikombe cha chai kwa mgeni #{guest}</h2>;
}

export default function TeaGathering() {
  const cups = [];
  for (let i = 1; i <= 12; i++) {
    cups.push(<Cup key={i} guest={i} />);
  }
  return cups;
}

Kama kigezo cha cups au array ya [] vingeundwa nje ya function ya TeaGathering, hili lingekuwa tatizo kubwa! Ungekuwa unabadilisha object iliyokuwepo tayari kwa kusukuma vitu ndani ya array hiyo.

Hata hivyo, ni sawa kwa sababu umeviunda wakati wa render ileile, ndani ya TeaGathering. Hakuna msimbo nje ya TeaGathering utakaowahi kujua kuwa hili lilitokea. Hili huitwa “local mutation” (mabadiliko ya ndani)—ni kama siri ndogo ya component yako.

Wapi unaweza kusababisha side effects

Ingawa functional programming inategemea sana purity, wakati fulani, mahali fulani, kitu fulani lazima kibadilike. Hilo ndilo lengo la programming kwa namna fulani! Mabadiliko haya—kusasisha skrini, kuanzisha animation, kubadilisha data—huitwa side effects. Ni mambo yanayotokea “pembeni”, si wakati wa ku-render.

Katika React, side effects kwa kawaida hukaa ndani ya event handlers. Event handlers ni functions ambazo React huziendesha unapofanya kitendo fulani—kwa mfano, unapobonyeza kitufe. Ingawa event handlers hufafanuliwa ndani ya component yako, hazi-endeshi wakati wa ku-render! Kwa hivyo event handlers hazihitaji kuwa pure.

Kama umeisha chaguo nyingine zote na huwezi kupata event handler sahihi kwa side effect yako, bado unaweza kuiambatanisha na JSX yako inayorudishwa kwa wito wa useEffect katika component yako. Hili huiambia React iitekeleze baadaye, baada ya ku-render, wakati side effects zinaporuhusiwa. Hata hivyo, njia hii inapaswa kuwa suluhisho lako la mwisho.

Inapowezekana, jaribu kuelezea mantiki yako kwa ku-render pekee. Utashangaa jinsi hili linavyoweza kukupeleka mbali!

Deep Dive

Kwa nini React inajali kuhusu purity?

Kuandika pure functions kunahitaji mazoea na nidhamu fulani. Lakini pia kunafungua fursa za ajabu:

Components zako zingeweza kuendeshwa katika mazingira tofauti—kwa mfano, kwenye seva! Kwa kuwa zinarudisha matokeo yaleyale kwa maingizo yaleyale, component moja inaweza kuhudumia maombi mengi ya watumiaji.
Unaweza kuboresha utendaji kwa kuruka ku-render components ambazo maingizo yao hayajabadilika. Hili ni salama kwa sababu pure functions kila mara hurudisha matokeo yaleyale, kwa hivyo ni salama kuzihifadhi kwenye cache.
Kama data fulani ikibadilika katikati ya ku-render mti wa component wa kina, React inaweza kuanzisha upya ku-render bila kupoteza muda kumalizia render iliyopitwa na wakati. Purity huifanya kuwa salama kusimamisha kuhesabu wakati wowote.

Kila kipengele kipya cha React tunachojenga hunufaika na purity. Kutoka kwenye kupata data hadi animations hadi utendaji, kuweka components zikiwa pure hufungua nguvu ya paradaimu ya React.

Recap

Component lazima iwe pure, ikimaanisha:
- Inashughulikia mambo yake yenyewe. Haipaswi kubadilisha objects au vigezo vyovyote vilivyokuwepo kabla ya ku-render.
- Ingizo lilelile, matokeo yaleyale. Ikipewa maingizo yaleyale, component inapaswa kila mara kurudisha JSX ileile.
Ku-render kunaweza kutokea wakati wowote, kwa hivyo components hazipaswi kutegemea mpangilio wa ku-render wa kila mmoja.
Hupaswi kubadilisha (mutate) maingizo yoyote ambayo components zako zinatumia kwa ku-render. Hilo linajumuisha props, state, na context. Ili kusasisha skrini, “weka” state badala ya kubadilisha objects zilizokuwepo tayari.
Jitahidi kuelezea mantiki ya component yako katika JSX unayorudisha. Unapohitaji “kubadilisha mambo”, kwa kawaida utataka kufanya hivyo katika event handler. Kama suluhisho la mwisho, unaweza kutumia useEffect.
Kuandika pure functions kunahitaji mazoezi kidogo, lakini kunafungua nguvu ya paradaimu ya React.

Try out some challenges

Challenge 1 of 3:
Rekebisha saa iliyoharibika

Component hii inajaribu kuweka klasi ya CSS ya <h1> kuwa "night" wakati wa saa kutoka usiku wa manane hadi saa sita asubuhi, na "day" nyakati nyingine zote. Hata hivyo, haifanyi kazi. Je, unaweza kurekebisha component hii?

Unaweza kuthibitisha kama suluhisho lako linafanya kazi kwa kubadilisha kwa muda eneo la saa la kompyuta. Wakati saa ya sasa iko kati ya usiku wa manane na saa sita asubuhi, saa inapaswa kuwa na rangi zilizogeuzwa!

Fork

export default function Clock({ time }) {
  const hours = time.getHours();
  if (hours >= 0 && hours <= 6) {
    document.getElementById('time').className = 'night';
  } else {
    document.getElementById('time').className = 'day';
  }
  return (
    <h1 id="time">
      {time.toLocaleTimeString()}
    </h1>
  );
}

PreviousRendering Lists

NextYour UI as a Tree

Kuweka Components Zikiwa Pure

You will learn

Purity: Components kama fomula

Side Effects: matokeo (yasiyo)kusudiwa

Deep Dive

Kugundua hesabu impure kwa StrictMode

Mabadiliko ya ndani: Siri ndogo ya component yako

Wapi unaweza kusababisha side effects

Deep Dive

Kwa nini React inajali kuhusu purity?

Recap

Try out some challenges

Challenge 1 of 3: Rekebisha saa iliyoharibika

Challenge 1 of 3:
Rekebisha saa iliyoharibika