Day 2: Jinsi React Inavyosasisha UI

Jana nilijifunza nini React hufanya. Leo nilijifunza jinsi inavyofanya hivyo.

Nilikuwa nikijiuliza jinsi React inavyojua hasa nini cha kubadilisha kwenye UI. Ukibadilisha neno moja kwenye aya, je, React hujenga upya ukurasa mzima? Hapana. Inatumia mchakato wa akili ili kubaki na kasi.

Hapa kuna mchanganuo wa mzunguko wa kusasisha wa React.

Reconciliation na Diffing

Reconciliation ni mkakati. Diffing ni mbinu halisi. React inalinganisha mti mpya wa Virtual DOM na ule wa zamani.

Kulinganisha miti miwili ni vigumu kwa kompyuta. Algorithim ya kawaida ni polepole sana. React inabaki na kasi kwa kufanya mawazo mawili:

  • Ikiwa aina ya element inabadilika, React inaharibu mti wa zamani na kujenga mpya.
  • Ikiwa aina inabaki vilevile, React inasasisha tu sifa (attributes) zilizobadilika.

Hii inaruhusu React kufanya kazi katika muda wa O(n). Hii inafanya usasishaji uhisiwe kuwa wa papo hapo.

Awamu Mbili

React inagawa kazi yake katika hatua mbili tofauti:

  1. Render Phase Hii ni hatua ya upangaji. React inaita components zako na kukokotoa mabadiliko. Hapa haigusi Real DOM. Ifikirie kama mchoraji wa ramani (architect) anayechora ramani ya jengo.

  2. Commit Phase Hii ni hatua ya ujenzi. React inatekeleza mabadiliko yaliyokokotolewa kwenye Real DOM. Sehemu hii ni ya synchronous. Ikianza, haisimami mpaka kazi iishe.

Muhimu: React inasasisha DOM, lakini kivinjari (browser) huchora pikseli. React inashughulikia muundo. Kivinjari kinashughulikia visual rendering.

React Fiber

Kabla ya React 16, rendering ulikuwa wa synchronous. Ikiwa rendering ilichukua muda mrefu, kivinjari kingelima (freeze). Usingeweza kusogeza ukurasa (scroll) au kuandika.

Fiber ilibadilisha hili. Fiber ni injini inayodhibiti Render Phase. Inaruhusu React:

  • Kusimamisha kazi na kurudi kuifanya baadaye.
  • Kutoa kipaumbele kwa usasishaji wa haraka kama vile mtumiaji anapoandika kuliko data za nyuma (background data).
  • Kugawanya kazi katika vipande vidogo.

Virtual DOM ni muundo wa data (data structure). Fiber ni algoriti inayofanya kazi kwenye data hiyo.

Muhtasari wa mtiririko:

• State inabadilika. • Render Phase: React inapanga mabadiliko kupitia Diffing. • Commit Phase: React inasasisha Real DOM. • Browser: Layout, Paint, na Composite. • Pikseli zinaonekana kwenye skrini.

Chanzo: https://dev.to/bismay-exe/day-2-of-learning-react-reconciliation-diffing-algorithm-render-phase-commit-phase-react-4f0f