什么是React Fibber？
React Fiber 是 React 框架的一種底層架構，為了改進 React 的渲染引擎，使其更加高效、靈活和可擴展。
傳統上，React 使用一種稱為堆棧調和遞歸算法來處理虛擬 DOM 的更新，這種方法在大型應用或者頻繁更新的情況下可能會產生性能問題。React Fiber 則是基于一種增量渲染的思想，它將更新任務分解成小的、可中斷的單元，使得 React 在更新時可以更靈活地控制和切換任務，提高應用的響應性。
React Fiber 的核心特點包括：
-
增量渲染： React Fiber 將更新任務拆分成多個小任務單元（稱為 “fiber”），并使用優先級調度器來處理這些任務，以提高響應性和用戶體驗。
-
優先級調度： Fiber 引入了優先級概念，使 React 能夠根據任務的優先級來決定任務的執行順序，確保高優先級任務得到及時處理。
-
中斷與恢復： React Fiber 允許在渲染過程中中斷任務，然后在適當的時機恢復執行，從而避免了阻塞的情況。
-
任務取消： Fiber 具備任務取消的能力，可以取消不必要的更新，提高性能。
React Fiber 架構的引入使得 React 更適用于構建大型、復雜的應用，同時也為引入一些新的功能（如異步渲染、懶加載等）提供了基礎。需要注意的是，從用戶角度看，React Fiber 并不會引入顯著的變化，它是在底層實現上進行的優化，但這些優化在一些場景下可能會顯著地提升應用的性能。
在代碼中fiber其實fiber就是一個類似雙向鏈表的數據結構。如下圖:
FiberNode
在 React Fiber 架構中，“FiberNode”（也稱為 “Fiber”）是一個重要的概念，它代表了 React 中虛擬 DOM 樹中的一個節點。FiberNode 是一個 JavaScript 對象，用于描述組件、元素或者其他 DOM 節點在虛擬 DOM 樹中的信息。
每個 FiberNode 包含了組件的狀態、屬性、樣式等信息，以及與其他節點的關系和更新狀態。在 React Fiber 中，FiberNode 是實現增量渲染和協調的關鍵數據結構。通過 FiberNode，React 可以追蹤組件樹的變化、處理更新以及優先級調度等操作。
，它包含了節點的類型、屬性、關系和狀態等信息，是實現增量渲染和協調的關鍵。
FiberNode 的一些重要屬性和信息包括：
- type： 表示節點的類型，可以是函數組件、類組件、原生 DOM 元素等。
- key 和 props： 節點的唯一標識符和屬性，用于對比不同渲染周期的節點。
- alternate： 用于雙緩存技術，表示與當前 FiberNode 相對應的上一次渲染的 FiberNode。
- child、sibling 和 return： 用于表示節點的子節點、兄弟節點和父節點的關系。
- effectTag 和 effect： 表示節點的操作類型（插入、更新、刪除等）和需要執行的副作用。
- stateNode： 與節點對應的實際 DOM 元素、組件實例等。
通過這些屬性，React Fiber 可以構建一棵虛擬 DOM 樹，并在渲染過程中對其進行協調、更新和處理。FiberNode 的設計使得 React 能夠實現增量渲染和中斷恢復等特性，從而提高應用的性能和響應性。
舉個例子來理解理解：
function App() {return (<div><h1>Hello, world!</h1><p>This is a simple example.</p></div>);
}
在 React Fiber 中，每個組件、元素和 DOM 節點都對應一個 FiberNode。以下是對應上述組件的 FiberNode 結構的簡化示意：
// 節點類型、標簽和屬性
const appFiber = {type: "div",key: null,props: {children: [{ type: "h1", key: null, props: { children: "Hello, world!" }, ... },{ type: "p", key: null, props: { children: "This is a simple example." }, ... }]},stateNode: null, // 與實際 DOM 節點關聯child: h1Fiber, // 子節點 Fibersibling: null, // 兄弟節點 Fiberreturn: null, // 父節點 FibereffectTag: null, // 用于表示更新操作類型effect: null, // 用于存儲副作用操作，如 DOM 更新alternate: null // 對應上一次渲染的 FiberNode
};const h1Fiber = {type: "h1",key: null,props: { children: "Hello, world!" },stateNode: null, // 與實際 DOM 節點關聯child: null,sibling: pFiber,return: appFiber,effectTag: null,effect: null,alternate: null
};const pFiber = {type: "p",key: null,props: { children: "This is a simple example." },stateNode: null, // 與實際 DOM 節點關聯child: null,sibling: null,return: appFiber,effectTag: null,effect: null,alternate: null
};
在這個示例中，appFiber 代表 <div> 組件的 FiberNode，h1Fiber 和 pFiber 分別代表 <h1> 和 <p> 元素的 FiberNode。每個 FiberNode 包含了類型、屬性、關系、狀態等信息，這些信息用于構建虛擬 DOM 樹并協調更新。
通過 child、sibling 和 return 屬性，FiberNodes 之間建立了層次關系。通過 effectTag 和 effect 屬性，React Fiber 可以追蹤更新操作和副作用操作。
為什么不用 generator 或 async/await？
在 React Fiber 架構中，為什么不使用 Generator 或 async/await 這些異步編程的特性主要涉及到性能和控制的問題。以下是一些原因：
-
細粒度控制： React Fiber 需要在渲染過程中對任務執行順序進行細粒度的控制，以實現優先級調度、中斷恢復等特性。使用 Generator 或 async/await 等語言特性，無法提供足夠細致的控制，難以實現這種精細的任務管理。
-
異步中斷與恢復： React Fiber 需要能夠在渲染過程中中斷任務，并在適當的時候恢復。Generator 和 async/await 難以在任務中途中斷，并在稍后恢復。而 Fiber 架構通過分割任務成可中斷的小單元，實現了中斷與恢復的能力。
-
性能和內存消耗： Generator 和 async/await 通常會引入更多的異步調度開銷，可能導致額外的性能損失和內存消耗。React Fiber 為了提高性能，需要更高效地管理任務的執行順序，從而減少不必要的開銷。
-
更細致的優化： React Fiber 通過任務的優先級調度，可以更好地處理高優先級任務，使得用戶操作的響應更迅速。這種優化在異步 Generator 或 async/await 中可能難以實現。
雖然 Generator 和 async/await 是在處理異步邏輯時非常有用的工具，但在 React Fiber 這種需要精細控制任務調度、中斷和恢復的情況下，它們的限制可能會導致無法實現所需的功能。因此，React Fiber 架構選擇了自己的方式來管理任務和優先級，以實現更高效、更精確的渲染和協調。
總結
今天分享的是才學習到的知識點，React框架東西很多，仍在那里探索中，爭取每天進步一點點。
)
