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