Kuelewa UI Yako kama Mti

UI yako kama mti

Miti ni muundo wa uhusiano kati ya vitu. UI mara nyingi huwakilishwa kwa kutumia miundo ya mti. Kwa mfano, vivinjari hutumia miundo ya mti kuiga HTML (DOM) na CSS (CSSOM). Mifumo ya simu za mkononi pia hutumia miti kuwakilisha ngazi ya mionekano yao.

Kama vivinjari na mifumo ya simu za mkononi, React pia hutumia miundo ya mti kusimamia na kuiga uhusiano kati ya components katika programu ya React. Miti hii ni zana za manufaa za kuelewa jinsi data inavyopita katika programu ya React na jinsi ya kuboresha ku-render na ukubwa wa programu.

Render Tree

Sifa kuu ya components ni uwezo wa kutunga components kutoka kwa components nyingine. Tunapopachika components, tunapata dhana ya components-mzazi na components-mtoto, ambapo kila component-mzazi yenyewe inaweza kuwa mtoto wa component nyingine.

Tunapo-render programu ya React, tunaweza kuiga uhusiano huu katika mti, ujulikanao kama render tree.

Hii hapa ni programu ya React inayo-render nukuu za kutia moyo.

import FancyText from './FancyText';
import InspirationGenerator from './InspirationGenerator';
import Copyright from './Copyright';

export default function App() {
  return (
    <>
      <FancyText title text="Get Inspired App" />
      <InspirationGenerator>
        <Copyright year={2004} />
      </InspirationGenerator>
    </>
  );
}

Kutoka kwa programu ya mfano, tunaweza kujenga render tree iliyo hapo juu.

Mti umetungwa na nodi, ambapo kila mmoja huwakilisha component. App, FancyText, Copyright, kwa kutaja chache, zote ni nodi katika mti wetu.

Nodi ya mzizi (root) katika render tree ya React ni component-mzizi ya programu. Katika hali hii, component-mzizi ni App na ndiyo component ya kwanza ambayo React inai-render. Kila mshale katika mti unaelekeza kutoka component-mzazi hadi component-mtoto.

Deep Dive

Tagi za HTML ziko wapi katika render tree?

Show Details

Utagundua kwamba katika render tree iliyo hapo juu, hakuna taja ya tagi za HTML ambazo kila component ina-render. Hii ni kwa sababu render tree imetungwa tu na components za React.

React, kama framework ya UI, haitegemei mfumo mahususi (platform agnostic). Kwenye react.dev, tunaonyesha mifano inayo-render kwenye wavuti, ambayo hutumia markup ya HTML kama vipengele vyake vya msingi vya UI. Lakini programu ya React ingeweza vilevile ku-render kwenye mfumo wa simu au wa kompyuta ya mezani, ambao unaweza kutumia vipengele tofauti vya msingi vya UI kama UIView au FrameworkElement.

Vipengele hivi vya msingi vya UI vya mfumo si sehemu ya React. Render trees za React zinaweza kutoa mwanga kuhusu programu yako ya React bila kujali ni mfumo gani programu yako inao-render.

Render tree huwakilisha pasi moja ya ku-render ya programu ya React. Kwa ku-render kwa masharti, component-mzazi inaweza ku-render watoto tofauti kutegemeana na data iliyopitishwa.

Tunaweza kusasisha programu ili ku-render kwa masharti ama nukuu ya kutia moyo au rangi.

import FancyText from './FancyText';
import InspirationGenerator from './InspirationGenerator';
import Copyright from './Copyright';

export default function App() {
  return (
    <>
      <FancyText title text="Get Inspired App" />
      <InspirationGenerator>
        <Copyright year={2004} />
      </InspirationGenerator>
    </>
  );
}

Katika mfano huu, kutegemeana na inspiration.type ni nini, tunaweza ku-render <FancyText> au <Color>. Render tree inaweza kuwa tofauti kwa kila pasi ya ku-render.

Ingawa render trees zinaweza kutofautiana katika pasi tofauti za ku-render, miti hii kwa ujumla ni ya manufaa kwa kutambua ni components zipi za ngazi ya juu na components za majani (leaf) katika programu ya React. Components za ngazi ya juu ni components zilizo karibu zaidi na component-mzizi na huathiri utendaji wa ku-render wa components zote zilizo chini yao na mara nyingi huwa na uchangamano mkubwa zaidi. Components za majani ziko karibu na chini ya mti na hazina components-watoto na mara nyingi hu-re-render mara kwa mara.

Kutambua makundi haya ya components ni ya manufaa kwa kuelewa mtiririko wa data na utendaji wa programu yako.

Module Dependency Tree

Uhusiano mwingine katika programu ya React unaoweza kuigwa kwa mti ni utegemezi wa module za programu. Tunapogawanya components zetu na mantiki katika faili tofauti, tunaunda module za JS ambapo tunaweza ku-export components, functions, au constants.

Kila nodi katika module dependency tree ni module na kila tawi huwakilisha kauli ya import katika module hiyo.

Tukichukua programu ya Inspirations iliyotangulia, tunaweza kujenga module dependency tree, au dependency tree kwa ufupi.

Nodi ya mzizi (root) ya mti ni module ya mzizi, ijulikanayo pia kama faili ya kuingilia (entrypoint file). Mara nyingi ni module inayoshikilia component-mzizi.

Ukilinganisha na render tree ya programu ileile, kuna miundo inayofanana lakini kuna tofauti chache za kuzingatia:

• Nodi zinazounda mti huwakilisha module, si components.
• Module zisizo za components, kama inspirations.js, pia huwakilishwa katika mti huu. Render tree inashikilia components pekee.
• Copyright.js inaonekana chini ya App.js lakini katika render tree, Copyright, component yenyewe, inaonekana kama mtoto wa InspirationGenerator. Hii ni kwa sababu InspirationGenerator inakubali JSX kama children props, hivyo inai-render Copyright kama component-mtoto lakini haii-import module.

Dependency trees ni za manufaa kubaini ni module zipi zinahitajika kuendesha programu yako ya React. Unapojenga programu ya React kwa ajili ya uzalishaji (production), kwa kawaida kuna hatua ya kujenga itakayounganisha JavaScript yote inayohitajika kupeleka kwa mteja. Zana inayohusika na hili inaitwa bundler, na bundlers zitatumia dependency tree kubaini ni module zipi zinapaswa kujumuishwa.

Kadri programu yako inavyokua, mara nyingi ukubwa wa bundle pia hukua. Ukubwa mkubwa wa bundle ni gharama kwa mteja kupakua na kuendesha. Ukubwa mkubwa wa bundle unaweza kuchelewesha muda wa UI yako kuchorwa. Kupata mwelekeo wa dependency tree ya programu yako kunaweza kusaidia katika kutatua matatizo haya.

Recap

• Miti ni njia ya kawaida ya kuwakilisha uhusiano kati ya vitu. Mara nyingi hutumika kuiga UI.
• Render trees huwakilisha uhusiano wa upachikaji kati ya components za React katika ku-render moja.
• Kwa ku-render kwa masharti, render tree inaweza kubadilika katika ku-render tofauti. Kwa thamani tofauti za props, components zinaweza ku-render components-watoto tofauti.
• Render trees husaidia kutambua ni components zipi za ngazi ya juu na za majani. Components za ngazi ya juu huathiri utendaji wa ku-render wa components zote zilizo chini yao na components za majani mara nyingi hu-re-render mara kwa mara. Kuzitambua ni ya manufaa kwa kuelewa na kutatua utendaji wa ku-render.
• Dependency trees huwakilisha utegemezi wa module katika programu ya React.
• Dependency trees hutumiwa na zana za kujenga kuunganisha msimbo unaohitajika kupeleka programu.
• Dependency trees ni za manufaa kwa kutatua ukubwa mkubwa wa bundle unaochelewesha muda wa kuchora na kufichua fursa za kuboresha ni msimbo upi unaounganishwa.