最近盤點了 2023年度熱門前端框架的 npm 下載量，發(fā)現(xiàn) Preact 已經(jīng)躋身前五名，年度下載量高達 1.23 億。本文就來看看 Preact 是什么，它和 React 又有何區(qū)別！

Preact 是什么？

Preact 是一個輕量級的前端庫，用于構建用戶界面（UI），其功能和 React 相似，但體積更小，只有大約 3 KB。Preact 具有與 React 類似的現(xiàn)代 API，因此可以視為 React 的一個快速、輕量級的替代方案。Preact 的核心目標是高性能、輕量級和即時生產(chǎn)，其名稱中的"P"代表 performance（性能）。

Preact并非 React 的翻版，兩者之間存在顯著差異。盡管其中許多差異看似微不足道，但通過preact/compat，可以實現(xiàn)與React的高度兼容。Preact 不追求包含 React 的所有功能，而是致力于保持其代碼的簡潔和專注。這種策略避免了不必要的復雜性，使得 Preact 更加高效。

Preact 的起源

Jason Miller，Preact 的創(chuàng)始人，長期致力于為Web創(chuàng)造各種UI框架和模板引擎。然而，他發(fā)現(xiàn)始終難以創(chuàng)建一個完全滿足他所有需求的完美框架，尤其是在處理 DOM 時遇到諸多挑戰(zhàn)。直到他發(fā)現(xiàn)了JSX和React，這兩個工具完美滿足了他對框架的所有期待和需求。為了更深入地理解React的工作原理，Jason決定親手打造一個與React類似的項目，他堅信通過實踐學習能取得更好的效果。

起初，Preact只是一個簡單的Codepen文件，但Jason通過持續(xù)不斷的優(yōu)化和新功能的添加，使其逐漸成長為能夠像React一樣渲染大量DOM元素的強大工具。當他在桌面和移動設備上對自己的項目進行速度測試時，結果令人驚喜：Preact的性能幾乎與純JavaScript相當，甚至在某些方面超越了React。

受到這一鼓舞，Jason決定將Preact繼續(xù)發(fā)展下去，并將其打造成為一個開源庫。這個庫旨在為那些因React的高性能成本而猶豫不決的開發(fā)者提供一個替代選擇。Preact不僅在功能上與React相近，而且更加輕量級和高效。該庫于2015年11月13日首次在GitHub上發(fā)布（v2.0.0）。

自那時以來，Preact社區(qū)不斷發(fā)展壯大，吸引了越來越多的用戶、貢獻者和維護者。如今，Preact已成為一個備受推崇的前端庫，為開發(fā)者提供了另一種構建高效、現(xiàn)代化用戶界面的選擇。

Preact vs React

大小

React 功能豐富，其生態(tài)系統(tǒng)中預置了眾多的實現(xiàn)、功能和函數(shù)。然而，這種全面性的代價是相對較大的打包體積。對于那些大量使用第三方庫或依賴項的應用來說，這可能會導致初始頁面加載時間受到影響。

Preact 因其小巧的體積而備受稱贊，從而在運行時提供了更低的資源占用。它聚焦于核心視圖庫，僅包含如事件處理和差異比較等基礎實現(xiàn)。為了更好地優(yōu)化性能和內存管理，Preact 完全摒棄了 React 中的調試功能和其他冗余特性。這種有針對性的設計策略使得打包后的體積大幅減少，同時確保了更高效的內存使用。

具體來說，React 本身大小約 6KB，而 ReactDOM 大小約 130KB，壓縮（Gzip）后的大小約為 42KB。而 Preact 的壓縮后的大小僅為 4KB。

合成事件

Preact 與 React 在事件系統(tǒng)的實現(xiàn)上有顯著差異：

• React 為了實現(xiàn)更好的性能和更小的包體積，引入了合成事件系統(tǒng)。這一系統(tǒng)為所有事件提供了一個跨瀏覽器的抽象層，確保了事件對象在不同瀏覽器中的一致性。
• 相比之下，Preact則選擇了更貼近瀏覽器原生行為的方式。它直接使用瀏覽器的標準 addEventListener 方法來注冊事件函數(shù)。這意味著在Preact中，事件名稱和事件對象的行為與原生JavaScript/DOM中的行為完全一致。

性能

Preact 因其卓越的性能和精簡的特性而備受贊譽。得益于其小巧的體積、簡練的代碼庫以及輕量級的虛擬DOM，Preact 能夠以比React更高的效率和速度更新組件。由于Preact的虛擬DOM設計得更為簡潔，它大幅減少了更新操作所需的工作量，從而實現(xiàn)了更快的運行時性能。

React之所以在性能方面與Preact相比稍顯遜色，是因為其虛擬DOM提供了更為全面和復雜的特性，以滿足復雜應用所面臨的挑戰(zhàn)。然而，這種全面的特性集在一定程度上犧牲了性能。

版本兼容

Preact 旨在與 React 完全兼容，這使得現(xiàn)有的 React 應用能夠無縫地遷移到 Preact，僅需最少的代碼更改。

Preact 和 Preact/Compat 的版本兼容性是根據(jù)它們與 React 的當前版本和前一個主要版本的兼容性來衡量的。當 React 團隊宣布新的功能或更新時，Preact 團隊會評估這些新功能是否符合 Preact 項目的目標。如果新功能對 Preact 有意義且符合項目的方向，那么這些功能可能會被納入 Preact 的核心代碼中。Preact 團隊會公開討論這些決策，并鼓勵社區(qū)成員通過問題、拉取請求等方式參與決策過程。

調試

React 提供了一系列豐富的調試工具，配備了適當?shù)腻e誤消息和調試功能。然而，將這些工具配置得完全適合項目可能具有挑戰(zhàn)性，需要仔細考慮和定制。雖然與 React 相比，Preact 提供的調試信息相對較少，但它確保開發(fā)人員能夠有效地排除和診斷應用中的關鍵問題。

Preact 靈活的架構允許插件以任何想要的方式增強 Preact 體驗。其中 preact/debug 插件添加了幫助性的警告和錯誤信息且附加了 Preact Developer Tools 瀏覽器插件。這些能幫助開發(fā)者在開發(fā) Preact 應用時更容易發(fā)現(xiàn)問題。

Hooks

Preact 引入了與 React 類似的 Hooks，為管理函數(shù)組件的狀態(tài)和副作用提供了類似的功能。不過，Hooks 不是 Preact 核心的一部分。它們已被分離出來，以保持主包較小，因此需要單獨導入?？梢詮?preact/hooks 或 preact/compat 中導入 Hook。

import { useState } from 'preact/hooks';

const App = () => {
  const [number, setNumber] = useState(0);
  const increment = () => setNumber(count + 1);
  const decrement = () => setNumber((currentNumber) => currentNumber - 1);

  return (
    <div>
      <p>Number: {Number}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  )
};

如何選擇？

在選擇Preact和React時，需要考慮多個因素，包括項目需求、性能要求、開發(fā)體驗、社區(qū)支持和生態(tài)系統(tǒng)等：

• 項目需求：如果你的項目需要構建輕量級、高性能的應用，特別是針對移動端或低帶寬環(huán)境，Preact可能是一個更好的選擇。Preact的體積更小，渲染性能更好，適用于這些場景。然而，如果你的項目需要更豐富的功能和更大的社區(qū)支持，React可能更適合。
• 性能要求：Preact在性能方面通常優(yōu)于React，特別是在大型應用中。Preact的代碼庫較小，內存占用和執(zhí)行時間更少，因此在某些情況下可能更快。如果你對性能有嚴格要求，Preact可能是一個更好的選擇。
• 開發(fā)體驗：如果你已經(jīng)熟悉React，那么使用Preact將非常容易，因為Preact與React的API在很大程度上是兼容的。這意味著你可以利用你在React中學到的知識和經(jīng)驗來開發(fā)Preact應用。此外，Preact的社區(qū)正在穩(wěn)定增長，出現(xiàn)了許多示例、文檔和工具，這也將提高你的開發(fā)體驗。
• 社區(qū)支持和生態(tài)系統(tǒng)：React作為最受歡迎的JavaScript庫之一，擁有龐大的社區(qū)和豐富的生態(tài)系統(tǒng)。這意味著你可以找到大量的教程、庫、插件和社區(qū)支持來幫助你解決問題。相比之下，Preact的社區(qū)雖然也在增長，但相對較小。然而，Preact的社區(qū)仍然非?；钴S，并且正在不斷發(fā)展壯大。