大家好，很高興又見面了，我是"前端進階"，由我帶着大家一起關注前端前沿、深入前端底層技術，大家一起進步，也歡迎大家關注、點贊、收藏、轉發！
前端進階
前言
React 以其豐富的特性和功能在 IT 行業占據統治地位，它改變了 Web 開發的方式。 根據 2021 年 Stackoverflow 開發人員調查，React 已經奪得建構 Web 應用程式最需要的架構的第一名。
不知大家有沒有聽過Preact這個架構，就算沒聽過Preact那也聽過React。Preact 比 React多了個P！這個P代表的是 Performance，高性能版React的意思。
注意：Preact一開始是CodePen上的一個小項目，用最少的代碼實作了React的最基本功能，與國内的《二百行實作個Vue》類似，然後放到CodePen上供大家敬仰學習。最後沒想到火了，随後作者又不斷添加了新功能，測試後發現性能簡直完爆React。是以，最後起名為高性能React，即Performance React!
Preact據稱是用于建構 Web 應用程式的 React 的輕量級替代方案，被廣泛的網站使用，從開源項目到大型跨國公司，其中就有Google。 本文将重點介紹 Preact 和 React 之間的差別，并闡明這兩種技術的優缺點。
1.什麼是 Preact？
Preact 是一個 JavaScript 庫，被認為是 React 的輕量級替代品，隻有3kb大小，同時與React具有相同的 API 和 ECMAScript 支援。
注意：根據官方資料顯示，Gzip壓縮後Preact應該是4.2Kb，而不是宣傳的3KB，據稱是Preact采用了向下取整的方式。
Preact被設計為在帶有 DOM 的浏覽器中工作，這就是為什麼它如此小巧的原因。
Preact與DOM更近
此外，它在速度上優于其他 JavaScript 架構，并且實作了虛拟 DOM。 GitHub 上已經有 33K 顆星，NPM 上每周下載下傳量超過 2,270,934 次，足以證明Preact的熱度。
2.為什麼選擇 Preact？
如果開發者關心應用程式的性能、速度和大小，Preact 是最佳選擇。 它主要用于建構漸進式網絡應用程式。 例如，Uber 已将其 PWA 轉換為 Preact，以保持應用程式超輕量、高性能。
圖檔來自Seth Corker文章《Save user’s data with a lighter alternative React》
除此之外，Preact是一個非常小的庫，不需要額外的學習成本。 它與 React 的相似性和相容性使其成為一個易于使用的庫，可以與現有的 React 包一起使用，并帶有一些别名，即使用 preact/compat。
3.Preact優缺點
3.1 Preact的優點
- 快速且輕量：Preact 大小僅為 3.5 kb，渲染速度非常快，使其成為建構高性能輕量級應用程式的最佳架構。
- React生态相容：它與 React API 高度相容，并支援相同的 ECMAScript，使其足夠高效地與現有的 React 項目內建以增強性能。
- 大型完善生态：生态完善，學習曲線簡單。 Preact有一個由許多貢獻者組成的大型社群。随時準備修複錯誤并提供問題的解決方案。
- 專用 CLI：Preact 具有強大的 CLI，可幫助開發人員在幾秒鐘内建構 PWA，而無需配置 WebPack、babel、Terser 等。
- Preact/compat：它有一個名為 preact/compat 的包來提供 100% 的相容性。 它允許開發人員将 React 庫與 Preact 一起使用，以便在不對工作流和代碼庫進行任何更改的情況下編寫 ReactDOM 代碼。
3.2 Preact 的缺點
- Mimics React：Preact 是作為 React 的輕量級替代品而開發的。 是以，通過該庫進行的大部分開發都模仿了 React，而不是創新應用程式開發。
- 使用附加庫：使用 Preact 時，有必要使用附加庫，如 preact/compat、preact/test-utils 等，以在 Preact 和基于 React 的 npm 包之間建立連接配接。 這使得項目變得龐大而緩慢。
- 沒有綜合事件處理：Preact 基于浏覽器 API，不支援綜合事件處理，這會影響應用程式性能并在使用 React 進行開發和 Preact 進行生産時導緻維護問題。
4.Preact vs. React開發者資料？
從Github資料來看，React的star達到了202K，相比之下Preact隻有33K，兩者之間相差了一個量級。但是考慮到React項目已經建立了11年，而Preact隻有7年時間，能有如此熱度已經實屬不易！
從過去一年的下載下傳資料來看，React和Preact都處于穩步上升趨勢，但是總體來看并不明顯。
以最近一周的下載下傳資料來看，React達到了16,359,457，而相比之下Preact也到了2,270,934。和star資料相比表現一緻，React是Preact的7.2倍。
不過，開發者資料隻能從一定程度上反映項目的熱度，但是考慮到項目時間，知名度等其他因素，Preact總體來看還是表現的很不錯的。如果真的特别關心應用程式的性能、速度和大小，Preact是值得一試的方案。
5.Preact使用
函數元件
函數式元件是接收 props 作為第一個參數的普通函數。函數名稱必須以大寫字母開頭，以便它們在 JSX 中工作。
function MyComponent(props) {
return <div>My name is {props.name}.</div>;
}
// 使用元件
const App = <MyComponent name="John Doe" />;
// 渲染: <div>My name is John Doe.</div>
render(App, document.body); 類元件
類元件可以有狀态和生命周期方法。 後者是特殊方法，例如當元件附加到 DOM 或銷毀時将被調用。這裡我們有一個名為 <Clock> 的簡單類元件，它顯示目前時間：
class Clock extends Component {
constructor() {
super();
this.state = { time: Date.now() };
}
// 生命周期: 元件建立調用
componentDidMount() {
// update time every second
this.timer = setInterval(() => {
this.setState({ time: Date.now() });
}, 1000);
}
// 生命周期: 元件解除安裝調用
componentWillUnmount() {
// stop when not renderable
clearInterval(this.timer);
}
render() {
let time = new Date(this.state.time).toLocaleTimeString();
return <span>{time}</span>;
}
} Hooks使用
function Counter() {
const [value, setValue] = useState(0);
// useState
const increment = useCallback(() => {
setValue(value + 1);
}, [value]);
return (
<div>
<p>Counter: {value}</p>
<button onClick={increment}>Increment</button>
</div>
);
} Signal使用
import { signal } from "@preact/signals";
const count = signal(0);
// Read a signal’s value by accessing .value:
console.log(count.value); // 0
// Update a signal’s value:
count.value += 1;
// The signal's value has changed:
console.log(count.value); // 1 Preact的用法與React基本類似，很容易上手，成本低，這一點大家可以放心。更多使用可以參考文末資料。
6.本文總結
本文主要和大家介紹Preact，即React的輕量級優秀解決方案，同時實作了虛拟DOM，與React保持高度相容。文章從什麼是 Preact、為什麼選擇 Preact、Preact優缺點、Preact vs. React開發者資料等四個次元展開，同時給出了Preact的代碼示例以供學習。
因為筆者還沒有來得及在生産環境部署、使用Preact，是以隻是做了一個基礎介紹，但是文末的參考資料提供了大量優秀文檔以供學習，如果有興趣可以自行閱讀。如果大家有什麼疑問歡迎在評論區留言。
參考資料
https://hackernoon.com/major-differences-between-preact-and-react-which-one-should-you-use
https://preactjs.com/
https://juejin.cn/post/7163528906539008030
https://preactjs.com/guide/v10/signals
https://daily.dev/blog/preact-a-lightweight-alternative-to-react
https://blog.sethcorker.com/save-users-data-with-a-lighter-alternative-to-react/