| 编辑推荐: |
本文主要介绍了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? |
|
