Preact——无线端活动页的轻量级开发方案

React开创了新的避免手动操作DOM方式——JSX,它不仅仅是一套库,而是一套标准。

1、前言

React现如今已经成为前端开发者的首选技术了,它天生携带着组件化的理念,并且拥有极强的生态,如Redux,Flux等数据管理工具,Material-UI,MUI,Ant.Design等UI组件,对于一个全新的控制台系统,在脚手架的辅助下,我们可以花费很少的时间就能投入到业务开发中。

对于无线端,React也能够很好的支持,但是对于一些运营活动页面来说,大部分情况下使用kimi是可以应付的,这些活动页具有如下特点:

  • 时效性强,很多运营需求来的特别急,往往是即开发即交付的。
  • 风格别致,基本上活动页UI无法通用,但是有一些特例,如:Loading,Dialog,Toast,Tab。
  • 逻辑简单,基本为内容展示,不用写太多,甚至不需要写JavaScript。

但是对于以下特点的活动页,使用kimi就有些力不从心了。

  • 内聚性强,此类活动由多个页面共同组成,多个页面通过跳转形成闭环。
  • 动态内容多,需要调用多个接口进行页面的呈现。
  • 页面展现丰富,页面上有许多行动点,每个行动点对应一段业务逻辑,多页面间相互关联。
  • 需求变化频繁,此类活动往往备受关注,需求在前期不可能完全明确界限,上线后也会根据外界反馈**随时**更改需求。

对于上述活动页而言,其已经可以看作一个完整的中型Application了,如果仅仅使用kimi,则因为状态多,交互多而存在代码质量不好把控,在操作DOM上花费额外精力,造成项目Delay的风险,由此可见,对于这类活动页,我们有必要使用一些库来帮我们解决问题了,React自己天然一套全家桶,携带了PropType,Children,Synthetic Events(合成事件),这些对于Web应用来说,依然是可以的,但是对于活动页来说,还是有些重了,于是要搬出Preact了,接下来简单地对它有一个了解。

  • Preact是以React为标准实现的一套库。
  • 两者的API几乎一致,迁移起来很方便。
  • 现有项目改造也很容易,无非是改改Webpack,Babel的配置文件。
  • 它很**小**(压缩后3KB),小到可以认为它只是借鉴了React的思想,来避免你手动操作DOM
  • 它很快,比React,Vue都快,非常适合移动端。参考

2、Hello World

下面是它的一个简单示例,你会发现几乎和React一模一样,只是引入的文件发生了改变,也就是说对于现有的一个页面,我们可以用Preact重构掉原先的DOM操作。

import {h,render} from 'preact';

render((
  <div>
    <h1>Hello World</h1>
    <button onClick={function(){console.log('hi')}}> Click Me </button>
  </div>
),document.body);

3、核心了解

3.1 处理JSX

在开发React时,我们都会去写JSX而不去写原生的React API,回顾一下,我们看一下JSX会被Babel翻译成什么。

// 这是一段React示例代码
class Demo extends React.Component {
  render(){return (
      <div className="active">
      <ul></ul>
      </div>
      )}
}
//经过Babel转译后
  _createClass(Demo, [{
    key: "render",
    value: function render() {
      return React.createElement(
        "div",
        { className: "active" },
        React.createElement(
          "ul",
          null
        )
      );
    }
  }]);

我们看到处理DOM的API为React.createElement,在Preact里,它使用了hyperscript来代替React.createElement这个方法,所以你需要告诉Babel使用h去处理。

{
  "plugins": [
    ["transform-react-jsx", { "pragma":"h" }]
  ]
}

甚至你也可以这么做。

import { h } from 'preact'

const React = {
  createElement:h
}

3.2 事件

Preact只是简单地对事件做了一层处理,我们看它的源码便可知晓,我们在JSX里写的onClick其实最终形成了addEventListener('click'),由于其只是原生的事件绑定,这样给予我们的灵活度更高,移动端头疼的300ms延时和点击穿透问题也可以迎刃而解(fastclick)。

else if ('o' === name[0] && 'n' === name[1]) {
     var l = node._listeners || (node._listeners = {});
     name = toLowerCase(name.substring(2));
     if (value) {
         if (!l[name]) node.addEventListener(name, eventProxy);
     } else if (l[name]) node.removeEventListener(name, eventProxy);
     l[name] = value;
 }

4、按需使用

4.1 看做新的模板渲染方式

在前端有许多中模板渲染方案,如jade(pug),mustache,ejs,我们也可以使用JSX用来渲染,相比前面几种,JSX写法简单,非常容易。举个例子:如果我们要根据后端返回的一段奖品列表渲染一个列表,用ejs可能会是下面这样:

<ul>
  <% lotteries.forEach(function(lottery){ %>
    <% include lottery/show %>
  <% }) %>
</ul>

但是使用Preact,我们可以只使用render方法,结合JSX语法,来作为我们渲染HTML的工具。

let content = lotteries.map(lottery=>(
  <li>{lottery.prizeName}</li>
))
let List = (
  <ul>
  {content}
  </ul>
)
let html = render(<List/>); // DOM Object
let htmlString = html.outerHTML // String
// do anythingÏ

5、参考资料

时间: 2017-03-06

Preact——无线端活动页的轻量级开发方案的相关文章

无线端的弹幕实现方案

前段时间做了游戏的相关业务,其中弹幕相关的内容自成一块.弹幕已经不只是最初的视频弹幕了,战火已经烧到了评论区,烧到了手机淘宝的首页搜索结果.作为一种近几年迅速燃起的内容呈现形式,有必要适时引入,对于休闲化.娱乐化的业务更是如此.那么,要做出一个较为完整的弹幕效果来,需要哪几个部分呢?尤其是,在集团内部,怎么快速地搭建起一个可用的弹幕框架来?本文分3块来阐述. 弹幕渲染层 弹幕数据通道 弹幕服务逻辑 弹幕渲染层 目前弹幕的呈现载体主要是Web.无线客户端.因为我们的工作主要针对无线端,所以本文主要

阿里巴巴无线端设计:用户在网站端的认知映射

文章描述:从无到有:阿里巴巴中国站手机客户端项目设计. 从无到有的阿里巴巴无线端设计,经历了由前期的产品定位.产品形态探索.无线需求场景脑暴.产品拆解.分合的产品思路讨论.版本规划到手机行为.手机平台特性分析乃至信息架构的确定.细节的推敲- 无线端敏捷开发节奏快,如何低成本.有条不紊的迭代更新,版本规划以及产品的拓展性考虑尤为关键.九宫格聚合的工具平台形态和运营形态在我们客户端的定位中必然共存,但一期内容不足功能较少,过渡期既要保证目前版本的充实和架构合理,又要考虑用户习惯的延续和activit

无线端网站优化的着力点及工具应用介绍

近期由于公司的战略由PC端逐步向无线端靠拢,我想这也是大部分稍微正规互联网企业的必由之路吧,当然,无线端的主角依然是无线APP应用,而作为seo来说,无线APP自然不是我们所能及的,而无线手机站的优化则是我们所必须面临的下一个目的地,我把它称作为下一个"深度"蓝海,之所以用深度这个词,因为从百度官方目前的说法来看,对于手机端wap站的优化,确实没有一个实际的规则可言,对于诸多尝试中的站长来说,之前的规则貌似在这里都不适应,依然是毫无头绪.在这里,笔者根据近几个月的研究,谈谈自己对于wa

携程转型无线端再陷裁员风波:优化地面销售

中介交易 SEO诊断 淘宝客 云主机 技术大厅 乐琰 "神童"梁建章回归携程(51.03, 0.87, 1.73%)CEO位置后,携程正大规模转型无线端业务,携程昨日透露,在暑期旺季,携程来自无线的酒店单日交易订单比峰值已达40%,超过PC网站,接下来其还将力拓(49.57, 0.21, 0.43%)无线端. 然而无线端业务的上升也让携程地面人工业务缩减,继今年1月底传出裁员数百人的消息后,日前携程再传将裁员地面营销人员.对此,携程坦言,在转型过程中,近期确实对原有地面销售渠道和电话营

去哪儿开拓无线端市场不遗余力,在线旅游市场竞争越加激烈

去哪儿正在不遗余力地开拓无线端市场. 3月17日,去哪儿(NASDAQ:QUNR)对外公布了其财报,无线端的高速增长成为外界关注的焦点.根据其披露的财报数据显示:2014年全年,去哪儿网无线收入为7.087亿元人民币,同比增长434.9%.其中第四季度的无线收入也首次占到总营收的50%左右. 事实上,不仅仅是去哪儿,携程.途牛.同程等也纷纷将未来发展的重点放在无线业务上,并且也都取得了一定的成绩. 在劲旅咨询CEO魏长仁看来,随着各家在无线端的扩张,资金.技术和用户体验成为无线端持续增长的几大难

携程转型无线端陷裁员风波地面人员何去何从

"神童"梁建章回归携程CEO位置后,携程正大规模转型无线端业务,携程昨日透露,在暑期旺季,携程来自无线的酒店单日交易订单比峰值已达40%,超过PC网站,接下来其还将力拓无线端.然而无线端业务的上升也让携程地面人工业务缩减,继今年1月底传出裁员数百人的消息后,日前携程再传将裁员地面营销人员.对此,携程坦言,在转型过程中,近期确实对原有地面销售渠道和电话营销部门进行了"优化".无线订单峰值达40%在刚过去的中秋节,细心的用户会发现携程发布中秋版 携程旅行5.0客户端,推

Dribbble无线端交互设计GIF动态图案例

文章描述:无线端交互设计(Dribbble GIF动态图实例). 盘点Dribbble上令人惊叹的无线端交互设计!来自全球牛人们的奇思妙想,新颖动人的交互在这一张张GIF动态图上一览无余!当然界面一样打动人心,腾出手点赞的同时!记得另存哟:) [1] [2] [3] [4] [5] [6]  下一页

用户体验部无线端APP统一化路程

一.为什么要做? 最初我们只有一个产品,产品就是品牌,品牌也就是这个产品,但后来产品多了,丰富了,开始强调差异化,我们需要提取更多共性的特征到品牌塑造中.品牌也就自然会独立出来,作特定考虑研究.品牌的核心仍然是产品,尤其在快速变化的互联网.移动互联网品牌化还不够理想的情况下,做好产品自然是给品牌加分的事情. 系统化的思考产品,更多的横向关联的推衍及提取共性,无疑会给产品迭代带来好处,会使用户认知与使用降低成本,功能传承性得到体现,通过这样一系列共性的传递,从而树立品牌特征,形成我们独特的语言.

无线端交互设计(Dribbble GIF动态图实例)

盘点Dribbble上令人惊叹的无线端交互设计!来自全球牛人们的奇思妙想,新颖动人的交互在这一张张GIF动态图上一览无余!当然界面一样打动人心,腾出手点赞的同时!记得另存哟:)