您可以捐助,支持我们的公益事业。

1元 10元 50元





认证码:  验证码,看不清楚?请点击刷新验证码 必填



  求知 文章 文库 Lib 视频 iPerson 课程 认证 咨询 工具 讲座 Modeler   Code  
会员   
   
 
     
   
 订阅
  捐助
Preact——无线端活动页的轻量级开发方案
 
 
  91  次浏览      1
 2021-3-1 
 
编辑推荐:
本文主要介绍了Preact是什么?Preact的核心,Preact按需使用。
本文来自于阿里云开发者社区,由火龙果软件Anna编辑推荐。

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?
 
   
91 次浏览       1
相关文章

深度解析:清理烂代码
如何编写出拥抱变化的代码
重构-使代码更简洁优美
团队项目开发"编码规范"系列文章
相关文档

重构-改善既有代码的设计
软件重构v2
代码整洁之道
高质量编程规范
相关课程

基于HTML5客户端、Web端的应用开发
HTML 5+CSS 开发
嵌入式C高质量编程
C++高级编程
最新课程计划
 
最新文章
如何设计高扩展的在线网页制作平台
electron入门心得
使用 Electron 构建桌面应用
VUE.JS组件化开发实践
深入理解JSCore
最新课程
HTML 5 + CSS3 原理与开发应用
Web前端高级工程师必备技能实战
Vue大型项目开发实战
React原理与实践
Vue.js进阶与案例实践
更多...   
成功案例
中交集团 构建Web自动化测试框架
某著名电信公司 Vue.js进阶与案例
国电通网络技术 HTML5+CSS3 +web前端框
移动通信 移动互联网应用开发原理
某电力行 android开发平台最佳
更多...