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 的事件循環來控制。








你可能感興趣的文章

[筆記] Command Line 超新手入門

[筆記] Command Line 超新手入門

[Py 百日馬 Day 0] 來場 Python 百日馬吧!

[Py 百日馬 Day 0] 來場 Python 百日馬吧!

物件(Objective)

物件(Objective)






留言討論