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的工具。