React 全新編譯器太好用了！
React 18 已經發布兩年多了，現在終于要迎來 React 19 了。這個版本將引入期待已久的全新 React 編譯器！它通過自動化優化來簡化前端開發流程，減少手動進行記憶化優化的需求。本文就來看看 React 編譯器是什么？它是如何工作的？又帶來了哪些好處？
React 19 新特性
React 19 不僅是向前邁進的一步，而且想要改變開發人員在 React 中構建應用的方式。React 19 計劃引入的一些最令人興奮的特性包括：
- 服務端組件：通過服務端組件，React 19 能夠實現更快的頁面加載速度和更好的 SEO 效果。這意味著在將頁面交付給用戶之前，服務器會預先處理組件，從而提升用戶體驗和搜索引擎可見性。
- Actions：React 19 引入了 Actions，這是一個全新的機制，用于簡化網頁內數據和交互的管理。通過 Actions，開發人員可以更方便地通過表單更新頁面信息，減少復雜性并優化用戶體驗。
- 優化的資源加載：React 19 在資源加載方面進行了優化，允許在后臺加載站點資源，以實現更平滑的頁面過渡。這意味著用戶可以在瀏覽當前頁面時，提前加載下一頁所需的圖片和其他文件，從而減少頁面切換時的等待時間。
- 文檔元數據：React 19 引入了一個新的 <DocumentHead> 組件，用于簡化 SEO 管理。通過該組件，開發人員可以更方便地向頁面添加標題和元標簽，提高搜索引擎優化效果，而無需進行重復的編碼工作。
- Web Components：React 19 改善了與 Web Components 標準的兼容性，使開發人員能夠更輕松地使用 Web Components 構建靈活、兼容的 Web 應用。
React 編譯器
React 編譯器一項自動優化工具，旨在通過先進的編譯技術減少不必要的重新渲染，提高 React 應用的性能。在深入探究 React 編譯器的工作原理之前，我們先回顧一下 React 的核心思維模型。
React 心智模型
React的核心是一個聲明式和基于組件的心智模型。在前端開發中，聲明式編程意味著描述 UI 的期望最終狀態，而無需通過 DOM 操作來指定達到該狀態的每一步。同時，基于組件的方法將 UI 元素分解為可重用、簡潔、自包含的構建塊，促進了模塊化并簡化了維護。
為了有效地識別需要更新的特定 DOM 元素，React使用了一個稱為虛擬 DOM 的內存中UI表示。當應用狀態發生變化時，React會將虛擬DOM與真實DOM進行比較，識別出所需的最小更改集，并精確地更新真實DOM。
簡而言之，React的心智模型是：每當應用狀態發生變化時，React就會重新渲染。然而，有時React可能會過于“反應靈敏”，導致不必要的重新渲染，從而降低應用的性能。
重新渲染的困境
React 對應用狀態變化的快速響應能力是一把雙刃劍。一方面，由于其聲明式方法，它簡化了前端開發。另一方面，它可能導致 UI 中組件對狀態變化的過度重新渲染。
當處理如對象和數組這樣的 JavaScript 數據結構時，重新渲染問題尤為常見。問題在于，JavaScript中沒有一種計算效率高的方法來比較兩個對象或數組是否相等（即具有相同的鍵和值）。
考慮以下場景：有一個React組件，它在每次渲染時都會生成一個新的對象或數組，如下所示：
import React from "react";
const AlphabetList = () => {
const alphabet = Array.from({ length: 26 }, (_, i) => String.fromCharCode(65 + i));
return (
<div>
<h2>Alphabet List</h2>
<ul>
{alphabet.map((letter, index) => (
<li key={index}>{letter}</li>
))}
</ul>
</div>
);
};
export default AlphabetList;盡管React組件在每次渲染時可能生成內容相同的本地數組，但React無法直接識別出這一點，因此可能會不必要地觸發依賴于該數組中值的組件及其嵌套DOM元素的重新渲染，即使 UI 實際上沒有變化。這種不受控制的重新渲染會很快導致性能下降，影響用戶體驗。
為了優化這種情況并減少不必要的重新渲染，React 開發人員可以利用記憶化技術。記憶化允許緩存基于特定輸入的計算結果或組件輸出，并在輸入未變時直接復用這些結果。這種方法能夠顯著減少組件的重新渲染次數，提高 React 應用的整體性能和效率。
React 18 提供了以下記憶化工具來幫助我們實現這一目標：
- React.memo()：一個高階組件，允許基于props的淺比較來避免組件的重新渲染，只要props沒有發生變化。
- useMemo()：用于在組件重新渲染之間緩存計算的結果。只有當依賴項之一發生變化時，useMemo()才會重新計算并返回新的結果。
- useCallback()：用于緩存函數的定義，確保在依賴項未變時不會重新創建函數。
通過使用useMemo() Hook，可以優化<AlphabetList>組件，避免在其依賴的數據（如數組）未發生變化時進行不必要的重新渲染。這種方法能夠顯著提高組件的性能，確保 UI 的流暢性和響應性。
import React, { useMemo } from "react";
const AlphabetList = () => {
const alphabet = useMemo(() => {
return Array.from({ length: 26 }, (_, i) => String.fromCharCode(65 + i));
}, []);
return (
<div>
<h2>Alphabet List</h2>
<ul>
{alphabet.map((letter, index) => (
<li key={index}>{letter}</li>
))}
</ul>
</div>
);
};
export default AlphabetList;React 的記憶化工具確實在提升性能上起到了關鍵作用，但它們確實增加了開發者的工作量和代碼復雜度，因為它要求開發者不僅描述 UI 的狀態，還需顯式管理渲染的優化。這在一定程度上違背了 React 強調的聲明式編程哲學。
為了減輕開發者的負擔，理想的解決方案是一個智能的編譯器或工具鏈，它能夠自動分析 React 組件的依賴關系，并生成優化的代碼。這樣的工具能夠確保組件僅在狀態值發生實質性變化時重新渲染，從而在不犧牲性能的前提下，保持代碼的簡潔性和可維護性。
React 編譯器是什么？
React 編譯器，亦名React Forget，是一款針對 React 的優化編譯器。它目前已在 Instagram 的網頁門戶中投入生產使用，并計劃在首次開源發布前，擴展至 Meta 旗下的其他應用。
最初，React 編譯器旨在通過自動生成類似于memo、useMemo和useCallback的調用，來強化React的核心編程模型，進而降低重新渲染的開銷。隨著時間的推移，該項目已從“自動記憶化編譯器”演進為更為先進的“自動響應性編譯器”。
React Forget 的核心目標，是確保 React 應用能夠默認擁有合理的響應性。這意味著應用僅在狀態值發生實質性變化時才會觸發重新渲染。傳統的 React 在對象標識改變時會重新渲染組件，而 React Forget 則通過智能判斷，僅在對象的語義內容變化時觸發重新渲染，同時避免了深度比較帶來的性能損耗。從技術實現來看，React 編譯器采用了自動記憶化技術。但開發團隊認為，響應性框架是理解其工作原理的更全面視角。
盡管 JavaScript 的動態特性和寬松規則使其優化變得復雜，但 React 編譯器通過模擬JavaScript和React的規則，確保了代碼編譯的安全性和效率。這些規則在限制開發人員操作的同時，也為編譯器執行優化提供了安全的操作空間。
React 編譯器好處
React 編譯器的引入帶來了顯著的益處：
- 簡化記憶化管理：開發者無需手動編寫和維護復雜的記憶化策略，從而降低了代碼的復雜性，減少了出錯的風險，并極大簡化了開發流程。
- 提升開發者體驗：開發者能夠更專注于核心功能的構建，無需分心于繁瑣的性能優化工作。不僅提高了生產力，還讓他們能更充分地利用React的聲明式編程優勢。
- 加速React應用性能：React 編譯器智能地決定何時渲染組件，有效減少了不必要的計算和資源消耗。這使得用戶界面更加流暢和響應迅速，為用戶帶來了更好的體驗，并顯著提升了整體應用的性能。
盡管這些改變令人充滿期待，但我們仍需觀察 React 編譯器在實際代碼開發中的具體效果。為了確保編譯器能夠高效運行，開發者需要確保他們的代碼嚴格遵循 React 的規則。因此，官方團隊強烈推薦使用 ESLint 等工具來準備和檢查代碼，以確保其兼容性并充分利用 React 編譯器的潛力。
React 的規則
React 設定了一套嚴格的規范，以確保Web應用的高質量。開發者需遵循這些原則，它們同樣是 React 編譯器背后的基石。
以下是React的幾個核心規則：
- 冪等性組件：React組件在接收到相同的輸入（包括props、state和context）時，應始終產生一致的輸出。
- 副作用外部化：副作用操作（如數據獲取、訂閱或DOM更新）不應嵌入在組件的渲染流程中。它們應被放置在如useEffect等生命周期 Hook 中執行。
- 不可變props與state：React組件中的props和state應被視為不可變。直接修改它們可能導致錯誤和不可預測的行為。
- Hooks參數與返回值的不變性：一旦值被傳遞給 React Hooks，它們應保持不變。Hooks依賴其參數和返回值的穩定性來確保組件行為的一致性和可預測性。
- 不可變JSX值：在 JSX 渲染后，不應修改其中使用的值。任何必要的修改應在JSX創建之前進行，以確保渲染結果的穩定性。
- 組件函數的使用限制：React組件應通過JSX使用，而非直接作為普通函數調用。
- Hooks的正確使用：React Hooks（如useState和useEffect）應僅在函數組件內部使用。將它們作為普通值傳遞可能會導致不符合預期的行為并違反Hooks的使用規則。從常規的JavaScript函數中調用hooks可能會導致錯誤并違反hooks的規則。
- 只在頂層調用hooks：React hooks 應該始終在函數組件的頂層調用，即在任何條件語句或循環之前。這確保了hooks在每次渲染時都以相同的順序被調用，并保持其預期的行為。
