Preact——無線端活動頁的輕量級開發方案

react開創了新的避免手動操作dom方式——<code>jsx</code>，它不僅僅是一套庫，而是一套标準。

react現如今已經成為前端開發者的首選技術了，它天生攜帶着元件化的理念，并且擁有極強的生态，如<code>redux</code>,<code>flux</code>等資料管理工具，<code>material-ui</code>,<code>mui</code>,<code>ant.design</code>等ui元件，對于一個全新的控制台系統，在腳手架的輔助下，我們可以花費很少的時間就能投入到業務開發中。

對于無線端，<code>react</code>也能夠很好的支援，但是對于一些營運活動頁面來說，大部分情況下使用<code>kimi</code>是可以應付的，這些活動頁具有如下特點：

時效性強，很多營運需求來的特别急，往往是即開發即傳遞的。

風格别緻，基本上活動頁ui無法通用，但是有一些特例，如：loading，dialog，toast，tab。

邏輯簡單，基本為内容展示，不用寫太多，甚至不需要寫javascript。

但是對于以下特點的活動頁，使用<code>kimi</code>就有些力不從心了。

内聚性強，此類活動由多個頁面共同組成，多個頁面通過跳轉形成閉環。

動态内容多，需要調用多個接口進行頁面的呈現。

頁面展現豐富，頁面上有許多行動點，每個行動點對應一段業務邏輯，多頁面間互相關聯。

需求變化頻繁，此類活動往往備受關注，需求在前期不可能完全明确界限，上線後也會根據外界回報随時更改需求。

對于上述活動頁而言，其已經可以看作一個完整的中型<code>application</code>了，如果僅僅使用<code>kimi</code>，則因為狀态多，互動多而存在代碼品質不好把控，在操作dom上花費額外精力，造成項目delay的風險，由此可見，對于這類活動頁，我們有必要使用一些庫來幫我們解決問題了，<code>react</code>自己天然一套全家桶，攜帶了<code>proptype</code>,<code>children</code>,<code>synthetic events</code>（合成事件），這些對于<code>web</code>應用來說，依然是可以的，但是對于活動頁來說，還是有些重了，于是要搬出<code>preact</code>了，接下來簡單地對它有一個了解。

<code>preact</code>是以<code>react</code>為标準實作的一套庫。

兩者的<code>api</code>幾乎一緻，遷移起來很友善。

現有項目改造也很容易，無非是改改<code>webpack</code>,<code>babel</code>的配置檔案。

它很小（壓縮後3kb）,小到可以認為它隻是借鑒了<code>react</code>的思想，來避免你手動操作<code>dom</code>。

下面是它的一個簡單示例，你會發現幾乎和<code>react</code>一模一樣，隻是引入的檔案發生了改變，也就是說對于現有的一個頁面，我們可以用<code>preact</code>重構掉原先的dom操作。

在開發<code>react</code>時，我們都會去寫<code>jsx</code>而不去寫原生的react api，回顧一下，我們看一下<code>jsx</code>會被<code>babel</code>翻譯成什麼。

我們看到處理dom的api為<code>react.createelement</code>，在<code>preact</code>裡，它使用了<code>hyperscript</code>來代替<code>react.createelement</code>這個方法，是以你需要告訴<code>babel</code>使用<code>h</code>去處理。

甚至你也可以這麼做。

<code>preact</code>隻是簡單地對事件做了一層處理，我們看它的源碼便可知曉，我們在<code>jsx</code>裡寫的<code>onclick</code>其實最終形成了<code>addeventlistener('click')</code>，由于其隻是原生的事件綁定，這樣給予我們的靈活度更高，移動端頭疼的300ms延時和點選穿透問題也可以迎刃而解（fastclick）。

在前端有許多中模闆渲染方案，如<code>jade(pug)</code>,<code>mustache</code>,<code>ejs</code>，我們也可以使用<code>jsx</code>用來渲染，相比前面幾種，<code>jsx</code>寫法簡單，非常容易。舉個例子：如果我們要根據後端傳回的一段獎品清單渲染一個清單，用<code>ejs</code>可能會是下面這樣：

但是使用<code>preact</code>，我們可以隻使用<code>render</code>方法，結合<code>jsx</code>文法，來作為我們渲染html的工具。