最近盤點了 ，發現 Preact 已經躋身前五名，年度下載量高達 1.23 億。本文就來看看 Preact 是什麽，它和 React 又有何區別！
Preact 是什麽？
Preact 是一個輕量級的前端庫，用於構建使用者介面（UI），其功能和 React 相似，但體積更小，只有大約 3 KB。Preact 具有與 React 類似的現代 API，因此可以視為 React 的一個快速、輕量級的替代方案。Preact 的核心目標是高效能、輕量級和即時生產，其名稱中的"P"代表 performance（效能）。
Preact並非 React 的翻版，兩者之間存在顯著差異。盡管其中許多差異看似微不足道，但透過preact/compat，可以實作與React的高度相容。Preact 不追求包含 React 的所有功能，而是致力於保持其程式碼的簡潔和專註。這種策略避免了不必要的復雜性，使得 Preact 更加高效。Preact 的起源
Jason Miller，Preact 的創始人，長期致力於為Web創造各種UI框架和樣版引擎。然而，他發現始終難以建立一個完全滿足他所有需求的完美框架，尤其是在處理 DOM 時遇到諸多挑戰。直到他發現了JSX和React，這兩個工具完美滿足了他對框架的所有期待和需求。為了更深入地理解React的工作原理，Jason決定親手打造一個與React類似的計畫，他堅信透過實踐學習能取得更好的效果。
起初，Preact只是一個簡單的Codepen檔，但Jason透過持續不斷的最佳化和新功能的添加，使其逐漸成長為能夠像React一樣渲染大量DOM元素的強大工具。當他在桌面和行動裝置上對自己的計畫進行速度測試時，結果令人驚喜：Preact的效能幾乎與純JavaScript相當，甚至在某些方面超越了React。受到這一鼓舞，Jason決定將Preact繼續發展下去，並將其打造成為一個開源庫。這個庫旨在為那些因React的高效能成本而猶豫不決的開發者提供一個替代選擇。Preact不僅在功能上與React相近，而且更加輕量級和高效。該庫於2015年11月13日首次在GitHub上釋出（v2.0.0）。
自那時以來，Preact社群不斷發展壯大，吸引了越來越多的使用者、貢獻者和維護者。如今，Preact已成為一個備受推崇的前端庫，為開發者提供了另一種構建高效、現代化使用者介面的選擇。
Preact vs React
大小
React 功能豐富，其生態系中偏好設定了眾多的實作、功能和函式。然而，這種全面性的代價是相對較大的打包體積。對於那些大量使用第三方庫或依賴項的套用來說，這可能會導致初始頁面載入時間受到影響。
Preact 因其小巧的體積而備受稱贊，從而在執行時提供了更低的資源占用。它聚焦於核心檢視庫，僅包含如事件處理和差異比較等基礎實作。為了更好地最佳化效能和記憶體管理，Preact 完全摒棄了 React 中的偵錯功能和其他冗余特性。這種有針對性的設計策略使得打包後的體積大幅減少，同時確保了更高效的記憶體使用。
具體來說，React 本身大小約 6KB，而 ReactDOM 大小約 130KB，壓縮（Gzip）後的大小約為 42KB。而 Preact 的壓縮後的大小僅為 4KB。
合成事件
Preact 與 React 在事件系統的實作上有顯著差異：
React 為了實作更好的效能和更小的包體積，引入了合成事件系統。這一系統為所有事件提供了一個跨瀏覽器的抽象層，確保了事件物件在不同瀏覽器中的一致性。
相比之下，Preact則選擇了更貼近瀏覽器原生行為的方式。它直接使用瀏覽器的標準 addEventListener 方法來註冊事件函式。這意味著在Preact中，事件名稱和事件物件的行為與原生JavaScript/DOM中的行為完全一致。
效能
Preact 因其卓越的效能和精簡的特性而備受贊譽。得益於其小巧的體積、簡練的程式碼庫以及輕量級的虛擬DOM，Preact 能夠以比React更高的效率和速度更新元件。由於Preact的虛擬DOM設計得更為簡潔，它大幅減少了更新操作所需的工作量，從而實作了更快的執行時效能。
React之所以在效能方面與Preact相比稍顯遜色，是因為其虛擬DOM提供了更為全面和復雜的特性，以滿足復雜套用所面臨的挑戰。然而，這種全面的特性集在一定程度上犧牲了效能。
版本相容
Preact 旨在與 React 完全相容，這使得現有的 React 套用能夠無縫地遷移到 Preact，僅需最少的程式碼更改。
Preact 和 Preact/Compat 的版本相容性是根據它們與 React 的目前版本和前一個主要版本的相容性來衡量的。當 React 團隊宣布新的功能或更新時，Preact 團隊會評估這些新功能是否符合 Preact 計畫的目標。如果新功能對 Preact 有意義且符合計畫的方向，那麽這些功能可能會被納入 Preact 的核心程式碼中。Preact 團隊會公開討論這些決策，並鼓勵社群成員透過問題、拉取請求等方式參與決策過程。
偵錯
React 提供了一系列豐富的偵錯工具，配備了適當的錯誤訊息和偵錯功能。然而，將這些工具配置得完全適合計畫可能具有挑戰性，需要仔細考慮和客製。雖然與 React 相比，Preact 提供的偵錯資訊相對較少，但它確保開發人員能夠有效地排除和診斷套用中的關鍵問題。
Preact 靈活的架構允許外掛程式以任何想要的方式增強 Preact 體驗。其中 preact/debug 外掛程式添加了幫助性的警告和錯誤資訊且附加了 Preact Developer Tools 瀏覽器外掛程式。這些能幫助開發者在開發 Preact 套用時更容易發現問題。
Hooks
Preact 引入了與 React 類似的 Hooks，為管理函陣列件的狀態和副作用提供了類似的功能。不過，Hooks 不是 Preact 核心的一部份。它們已被分離出來，以保持主包較小，因此需要單獨匯入。可以從 preact/hooks 或 preact/compat 中匯入 Hook。
import{ useState }from'preact/hooks';
constApp=()=>{
const[number, setNumber]=useState(0);
constincrement=()=>setNumber(count +1);
constdecrement=()=>setNumber((currentNumber)=> currentNumber -1);
return(
<div>
<p>Number:{Number}</p>
<button onClick={increment}>Increment</button>
<button onClick={decrement}>Decrement</button>
</div>
)
};
如何選擇？
在選擇Preact和React時，需要考慮多個因素，包括計畫需求、效能要求、開發體驗、社群支持和生態系等：
計畫需求：如果你的計畫需要構建輕量級、高效能的套用，特別是針對移動端或低頻寬環境，Preact可能是一個更好的選擇。Preact的體積更小，渲染效能更好，適用於這些場景。然而，如果你的計畫需要更豐富的功能和更大的社群支持，React可能更適合。
效能要求：Preact在效能方面通常優於React，特別是在大型套用中。Preact的程式碼庫較小，記憶體占用和執行時間更少，因此在某些情況下可能更快。如果你對效能有嚴格要求，Preact可能是一個更好的選擇。
開發體驗：如果你已經熟悉React，那麽使用Preact將非常容易，因為Preact與React的API在很大程度上是相容的。這意味著你可以利用你在React中學到的知識和經驗來開發Preact套用。此外，Preact的社群正在穩定增長，出現了許多範例、文件和工具，這也將提高你的開發體驗。
社群支持和生態系：React作為最受歡迎的JavaScript庫之一，擁有龐大的社群和豐富的生態系。這意味著你可以找到大量的教程、庫、外掛程式和社群支持來幫助你解決問題。相比之下，Preact的社群雖然也在增長，但相對較小。然而，Preact的社群仍然非常活躍，並且正在不斷發展壯大。
