從編寫組件到最后屏幕生成界面，如上圖所示，我們現(xiàn)在需要知道的就是后面幾步是如何運(yùn)行的。

概述

這張圖解釋了 React 渲染過程的幾個(gè)階段：

1. 渲染觸發(fā)：通過更新某處的狀態(tài)來觸發(fā)渲染。
2. 渲染階段：React 調(diào)用組件函數(shù)，確定如何更新 DOM。這是內(nèi)部計(jì)算階段，不會(huì)立即對屏幕產(chǎn)生視覺變化。
3. 提交階段：React 實(shí)際寫入 DOM，進(jìn)行元素的更新、插入和刪除。
4. 瀏覽器繪制：瀏覽器將更新后的內(nèi)容繪制到屏幕上。

在 React 中，渲染并不是指更新 DOM 或在屏幕上顯示元素。渲染僅在 React 內(nèi)部發(fā)生，不會(huì)直接產(chǎn)生視覺變化。

?渲染觸發(fā)

渲染觸發(fā)條件

1. 初次渲染：應(yīng)用程序的初始渲染。
2. 狀態(tài)更新：一個(gè)或多個(gè)組件實(shí)例的狀態(tài)更新（重新渲染）。

直覺上的狀態(tài)更新如下：

但其實(shí)并不是，實(shí)際上它是批量更新的。

例子如下：

關(guān)鍵點(diǎn)

• 渲染過程是為整個(gè)應(yīng)用程序觸發(fā)的。
• 實(shí)際上，看起來 React 只重新渲染狀態(tài)更新的組件，但背后工作并非如此。
• 渲染不會(huì)立即觸發(fā)，而是安排在 JavaScript 引擎有空閑時(shí)間時(shí)執(zhí)行。事件處理程序中的多個(gè)?setState?調(diào)用也會(huì)進(jìn)行批處理。

渲染階段

什么是虛擬DOM？?

它只是一個(gè)javascript對象。

為什么需要協(xié)調(diào)（Reconciliation）和區(qū)別（diffing）？

纖維樹（Fiber tree）是什么？?

• React 元素樹（虛擬 DOM）：左側(cè)顯示了一個(gè) React 組件樹，包含組件如?App、Video、Modal、Overlay、h3?和?button。這是 React 的虛擬 DOM 表示。
• Fiber 樹：右側(cè)是 Fiber 樹，它在初次渲染時(shí)被創(chuàng)建。每個(gè)組件實(shí)例和 DOM 元素都有一個(gè)對應(yīng)的“fiber”。
• Fiber：每個(gè) fiber 是一個(gè)“工作單元”，包含以下信息：
  • 當(dāng)前狀態(tài)
  • 屬性（Props）
  • 副作用
  • 使用的鉤子（hooks）
  • 工作隊(duì)列
• 纖維樹的特點(diǎn)：
  • 內(nèi)部樹結(jié)構(gòu)：每個(gè)組件實(shí)例和DOM元素都有一個(gè)對應(yīng)的“fiber”。這些fiber節(jié)點(diǎn)形成了一個(gè)樹狀結(jié)構(gòu)，用于描述UI界面。
  • Fiber節(jié)點(diǎn)不在每次渲染時(shí)重新創(chuàng)建：這意味著React可以復(fù)用已有的fiber節(jié)點(diǎn)，從而減少不必要的計(jì)算和內(nèi)存使用。

  • 異步渲染

    • 異步完成工作：Fiber允許將渲染任務(wù)分成小塊，利用瀏覽器的空閑時(shí)間進(jìn)行處理。這種方式避免了長時(shí)間阻塞主線程，提高了應(yīng)用的響應(yīng)性。
    • 任務(wù)優(yōu)先級調(diào)度：React可以根據(jù)任務(wù)的重要性來決定執(zhí)行順序，優(yōu)先處理用戶交互等關(guān)鍵任務(wù)。

  • 并發(fā)特性

    • 支持并發(fā)特性：Fiber架構(gòu)支持React中的并發(fā)模式，使得應(yīng)用能夠更好地處理復(fù)雜交互和動(dòng)態(tài)變化，例如Suspense或過渡效果。
    • 長時(shí)間渲染不會(huì)阻塞JavaScript引擎：通過將渲染過程分割成小塊，React能夠在不中斷用戶界面的情況下進(jìn)行更新。

  • 具體實(shí)現(xiàn)

    • 增量式渲染：通過將渲染任務(wù)分配到多個(gè)幀中，React可以保持應(yīng)用的流暢性，即使在復(fù)雜布局或大量計(jì)算時(shí)也能保持響應(yīng)。
    • 可中斷和恢復(fù)的渲染：在需要時(shí)，React可以暫停當(dāng)前任務(wù)，并在稍后恢復(fù)，從而提高用戶體驗(yàn)。

?協(xié)調(diào)（Reconciliation）舉例

?區(qū)分（Diffing）舉例

key prop是什么？

在list中使用key prop

使用key prop重置狀態(tài)?

這不是我們想要的，需要使用key prop進(jìn)行重置state。

?提交階段

繪制階段

總結(jié)