Preact React的輕量解決方案

本文使用starter-kit：steamer-react react分支。此分支已整合react與preact。

選型的時候，首先有幾個考量：

基本上以上幾點，preact都能夠很好的滿足，因此最終選定為團隊的類react輕量化框架進行使用和研究。

效能方面，preact也不俗。載入效能方面，由於本身的bundle在gzip後大概只有3kb，跟react相比小太多，自由就有優勢。渲染效能方面，參考了一篇js web frameworks benchmark系列測評文章，發現preact在建立、更新、刪除節點等方面，都有良好的表現。

第一次效能測試：

第二次效能測試：

包大小：

framework

version

minimized size

react

0.14.3

136.0kb

react-lite

0.15.6

25kb

preact

5.6.0

10kb

deku

2.0.0-rc16

51.2kb

virtual dom

2.1.1

50.5kb

除了效能的良好表現，此框架的瀏覽器相容性也不錯，能相容目前的主流瀏覽器，並且在新增polyfill的情況下，能夠相容在國內還有不少份額的ie8，確實是不少還需要相容ie8開發者的福音。

preact的常用api基本跟react一致，這使得對react熟悉的開發者，完全沒有上手的難度，preact作者單獨開闢了乙個文件differences to react，介紹react與preact的異同。preact主要缺少的react api有proptype，children, 和 synthetic events（合成事件）。作者解釋道，proptype其實許多人都不使用，並不影響開發； children其實是陣列，所以也並不是必須的；而合成事件，由於不需要過度考慮不同瀏覽器對事件處理的異同，所以也並沒有做過度封裝。如果真的想使用以上這些缺失的react api，作者也提供了preact-compat，使用的時候，在webpack上的external這樣替換便可：


}// ...
}複製**

對於react開發者來說，最常用的就是redux, router這些周邊的外掛程式。而preact也有提供preact-redux和preact-router，甚至還有幫助preact做同構直出的preact-render-to-string。

preact專案的框架小而美，合併成的dist檔案也只有500行左右，比較容易學習和維護。若團隊選擇此框架作為react的輕量解決方案的話，我們最好能具備維護和開發此框架的能力，這能夠在遇到bug的時候第一時間修復，而且能夠很好地開發一些元件，提公升框架的開發效率。

作者在getting started裡有比較好的介紹。其實不外乎就2點差異：

如果你想在乙個構建裡面同時使用react和preact（有的頁面使用react，有的用preact），你可以通過webapck的loader include或者exclude，然後憑路徑區分。而我在steamer-react的react-preact分支裡的處理是直接用檔名字尾。如果是有react相關引入的，則用.js字尾，而有preact相關引入的，則用.jsx字尾。

粗略看了一下preact的實現，簡單介紹一下。

virtual dom算是類react框架的最大賣點。preac作者寫了一篇wtf is jsx。主要就是借助babel-plugin-transform-react-jsx的能力，裡面有個pragma引數，用於設定用什麼函式來做virtual dom的轉換。此處定義的是preact.h

["transform-react-jsx", ]複製**

所以，你會看到編譯後，有類似的**：

_preact2.default.h(
'p',
,item.des
)複製**

檢視原始碼，preac定義了h的函式，用於將傳入的值轉換成virtual dom:

function
h(nodename, attributes, firstchild) 複製**

所以，如果傳入上面的p和對應屬性，則會轉換成下面的物件：

vnode , children: undefined, key: undefined}複製**

但virtual dom需要轉換成真實的dom，還需要乙個函式進行轉換。在preact中，大體是通過這個流程，然後最終轉換成真實dom：

render (類似於react-dom裡的render，主入口，觸發渲染) => diff => idiff （看起來應該是做dom diff） => createnode （生成真實dom）複製**

元件化也是類react框架的一大特色。preact的元件化，主要是通過component這一方法來實現的。主要包括，setstate，render以及一眾生命週期。主要的渲染，生命週期的觸發，也主要定義在rendercomponent和setcomponentprops方法內。使用者的自定義元件只需要繼承component就可以自由使用preact元件化的能力。

preact並沒有像react那樣自己實現了一套事件機制，主要還是用瀏覽器自帶的能力。因此，在給生成真實dom並通過setaccessor給dom插入屬性的時候，有這麼一段**：

else
if ('o' === name[0] && 'n' === name[1]) );
name = tolowercase(name.substring(2));
if (value) else
if (l[name]) node.removeeventlistener(name, eventproxy);
l[name] = value;
}複製**

判斷屬性中是否含有o和n，也就是在看，有沒有on開頭的屬性（一般就是事件）。然後就進行addeventlistener或者removeeventlistener。看起來跟我們寫原生js的事件繫結沒有什麼區別。

如有錯誤，懇請斧正。

Preact React的輕量解決方案

程序輕量程序執行緒

輕量ORM SqlRepoEx 重大公升級

StructureMap 輕量IOC框架

Preact React的輕量解決方案

程序 輕量程序 執行緒

輕量ORM SqlRepoEx 重大公升級

StructureMap 輕量IOC框架

相關推薦

程序輕量程序執行緒