React-[核心篇]- React渲染功能在後台是怎麼運作的?


React的渲染功能-總覽

當我們在建置應用程式時,其實我們是從建置不同的元件開始的


渲染階段(the render phase)-最複雜的一段

render phase總覽


渲染階段的過程:re-render -> react element

  • React在渲染階段,這渲染在內部到底做了什麼?
  • React 在 "render phase"(渲染階段)主要負責構建虛擬 DOM(Virtual DOM)樹,這是一個表示使用者界面的抽象結構,以及比較新舊虛擬 DOM 樹以找出變化

渲染階段的過程:React Virtual DOM(React element tree)

首先,virtual DOM 跟DOM(Document Object Model)都是描述和操作網頁内容的概念,虚擬 DOM 是 React 的一種優化手段,减少直接操作實際 DOM 的次數,從而提高性能和響應性

  • React不知道哪個元件中的子元件prop 有沒有更動,他會以最安全的方式直接更新該元件下的虛擬DOM

  • 虛擬 DOM(Virtual DOM)是React框架中的一個重要概念,用於優化Web應用程序的性能和效率。它是一種在內存中維護的輕量級、抽象的DOM副本,用於跟蹤和管理Web頁面上的元素和數據。

  • 虛擬 DOM 的主要核心如下:

  1. 建立虛擬 DOM:當React應用程序渲染時,它不會直接操作實際的瀏覽器DOM。相反,它會創建一個虛擬DOM,這是一個JavaScript對象樹,與實際DOM具有相同的結構。虛擬DOM包含了元素的屬性和數據。
  2. 比較虛擬 DOM:當應用程序的狀態發生變化時(例如,用戶與應用程序交互或數據變化),React會創建一個新的虛擬DOM。然後,React會將新的虛擬DOM與之前的虛擬DOM進行比較,找出差異。
  3. 計算最小變更:React的虛擬DOM比較算法能夠找到最小的變更集,以使新的虛擬DOM與前一個虛擬DOM匹配。這包括添加、刪除或更新元素的操作。
  4. 應用變更:一旦React計算出變更,它會將這些變更應用到實際的DOM上。這些變更是最小的,因此可以高效地更新瀏覽器的DOM,而不需要重新渲染整個頁面。
  • 虛擬 DOM 的優點包括:
    • 提高性能:通過比較虛擬DOM而不是實際DOM,React可以最小化DOM操作,從而提高性能。
    • 簡化代碼:開發人員可以專注於描述應用程序的狀態和UI,而不必擔心手動更新DOM。
    • 跨平台:React的虛擬DOM可以用於Web、原生移動應用和其他平台,使代碼共享更容易。

總之,虛擬DOM是React框架的一個關鍵特性,它有助於優化Web應用程序的性能,提高開發效率,並實現跨平台開發。


渲染階段的過程:Reconciliation(協調)和Diffing(差異比較)

  • Reconciliation(協調)和Diffing(差異比較)是React中處理組件更新的關鍵概念,它們有助於確定如何更新虛擬DOM(Virtual DOM)以反映應用程序狀態的變化。

Reconciliation(協調):
Reconciliation是React中負責協調組件更新的過程。在組件的狀態發生變化時,React會調用相應組件的render方法生成新的虛擬DOM樹。
然後,React將新的虛擬DOM樹與之前的虛擬DOM樹進行比較,以確定哪些部分發生了變化。

Reconciliation的目標是找到最小的一組DOM操作,以使實際DOM反映出新的虛擬DOM結構,從而減少性能開銷。

Diffing(差異比較):
Diffing是Reconciliation過程中的一部分,指的是比較新舊虛擬DOM樹以找出它們之間的差異。
React使用diffing算法來逐級比較虛擬DOM樹的節點。它會比較節點的類型、屬性和子節點。
如果兩個節點不同,React將標記它們為需要更新,並將其添加到更新隊列中,以便後續應用到實際DOM上。
如果節點相同,React將遞歸比較它們的子節點,以找出更深層次的差異。
Diffing算法的目標是儘量減少DOM操作的數量。通過聰明地比較虛擬DOM樹,React能夠確定哪些部分需要實際更新,哪些部分保持不變。這種優化有助於提高性能,減少不必要的計算和渲染。

總之,Reconciliation(協調)和Diffing(差異比較)是React在更新組件時用於確定如何最小化實際DOM操作的關鍵概念。通過比較新舊虛擬DOM樹並找出差異,React能夠以高效的方式更新使用者界面,從而提高性能和響應性。


渲染階段的過程:認識Fiber(reconciler)(協調)

Fiber(reconciler)是 React 渲染引擎的一个关键组成部分 不會消失 在協調過程隨著virtual dom 改變 也可以改變fiber tree資料 fiber可以追蹤元件資料 props /current state/ side effects/used hooks/ queue of work

Fiber 是 React 渲染引擎的一部分,它是 React 16 版本引入的一種新的協調和調度算法,旨在提高 React 應用程式的性能和使用者介面的響應性。

  • Fiber 的主要目標和功能包括:

  • 可中斷性(Interruptibility):Fiber 允許 React 在渲染和協調過程中進行中斷和暫停,以優先處理更高優先級的任務。這使得 React 可以更好地應對使用者交互、動畫和其他優先級較高的任務,從而提高使用者介面的響應性。

  • 增量渲染(Incremental Rendering):Fiber 支持增量渲染,即將渲染工作拆分為多個小步驟,分佈在多個渲染周期中完成。這有助於避免長時間的阻塞,提高了使用者介面的流暢性。

  • 優先級調度(Priority Scheduling):Fiber 具有任務的優先級概念,允許 React 在執行任務時考慮任務的重要性,確保重要任務先執行。這有助於提高 React 應用程式的性能和響應性。

  • 可中斷性和優先級調度的結合:Fiber 將可中斷性和優先級調度相結合,使 React 能夠更靈活地管理和分配任務,以適應不同場景下的需求。

總之,Fiber 是 React 內部的一個算法和架構改進,旨在提高 React 渲染引擎的性能和響應性,使其能夠更好地處理大型和複雜的組件樹以及高優先級任務。Fiber 的引入使得 React 在各種應用場景中都能夠表現出色,並有助於 React 在未來進一步發展和優化。

認識渲染階段中的關鍵字

需要先認識的關鍵字:
Virtual DOM 調和(reconciliation/fiber

  • React渲染引擎核心組成:

    • 協調器(Reconciler/Fiber )/
    • Renderer(渲染器)/
    • Scheduler(調度器)/
    • Hooks/
    • Context(上下文)/
    • Portals(門户)/
    • Profiler(性能分析器)
  • 定義:

    • 渲染階段(the render phase)通常在計算機圖形、網頁開發或UI設計等領域使用,用於描述處理和準備將要呈現(顯示)給使用者的內容的階段。
    • 在網頁開發中,"渲染階段" 指的是將HTML元素、CSS樣式和JavaScript邏輯結合起來生成最終的可視化界面的過程

在React中,渲染rendering 並不是我們所想的更新Dom 或是呈現元素在螢幕上,React的rendering僅僅只發生在React內部,並沒有產生視覺上的改變(平常我們講React rendering只是比較好理解=畫面生成,但實際上是有差別的)

React的渲染是如何被觸發的

  • 渲染被觸發是作用於整個應用程式(而不是單一元件而已喔),也就是說是整個dom被重新渲染(雖然我們從外看起來只是好像更新單一元件而已,但內部卻是整個重新渲染->影響效能)
  • 渲染也不是立即發生,而是當js引擎有空閑時間,才會被排成進去運作

確認階段(the commit phase)

在commit phase,React 會寫入在DOM元素中,更新或是插入或是刪除元素

然後再呈現在瀏覽器上


補充:

這裡我容易和js event loop搞混,所以特別查了一下chatgpt:

  • React 中的渲染是由 React 的更新機制來調度的,而不是由 JavaScript 的事件循環(event loop)來調度。React 使用一種稱為 "調和"(reconciliation)的過程,來處理組件的更新和重新渲染
    當組件的狀態或屬性發生變化時,React 會將這些變化記錄下來,然後在適當的時機進行重新渲染。React 不是即時執行渲染,而是優化渲染的頻率和順序,以提高性能。

事件循環(event loop)通常用於處理 JavaScript 代碼的非同步操作,例如事件處理、定時器等等,而不是用於處理 React 組件的渲染。當 React 組件需要渲染時,它會在 React 的控制下進行處理,而不依賴於事件循環。

總之,React 的渲染由 React 自身的機制來調度,不是由 JavaScript 的事件循環來控制。








你可能感興趣的文章

程式導師實驗計畫 week 2 題目與解答

程式導師實驗計畫 week 2 題目與解答

Express Web App 靜態、動態路由

Express Web App 靜態、動態路由

課程學習

課程學習






留言討論