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

1元 10元 50元





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



  求知 文章 文库 Lib 视频 iPerson 课程 认证 咨询 工具 讲座 Modeler   Code  
会员   
   
 
     
   
 订阅
  捐助
Preact简介
 
作者:李金玲
  140  次浏览      1
 2021-3-4 
 
编辑推荐:
本文主要介绍了什么是preac、preact工作原理、为什么用preact以及如何使用。
本文来自于微信 Web手艺人,由火龙果软件Anna编辑推荐。

一、什么是preact

1.React 的 3kb 轻量化方案,可替代react

2.Api几乎和react一致

3.提供兼容层preact-compat,可以无缝使用 React 生态系统中其他组件

缺少react的一些特性

PropType 验证:平时很少会用到

Children:并非必要特性

Synthetic Events:一个事件的完整实现意味着更多的维护和性能的考虑,以及更庞大的 API。Preact 的浏览器支持并不需要这个开销。

二、.preact工作原理

1.使用h函数转化jsx

Babel中默认转化jsx使用的是React.createElement, 而preact使用的是h函数, 所以需要将babel中转化jsx的函数替换成preact.h。

首先将Jsx代码通过babel编译成h函数调用;

h函数会返回如图VNODE对象,包括attributes、children、key、nodeName属性,由于每一个jsx标签都会返回一个h函数调用,所以最终会返回一个带有子孙节点的虚拟dom树对象;

最后通过Preact虚拟dom算法,将虚拟dom树转化为真实的dom。

2.虚拟dom算法-新增节点

App会被转化为如图vnode对象

Preact会判断:

当前nodeName是一个dom节点div,则直接通过createElement创建出来,

接着处理子节点,子节点是一个component App2,preact会调用其render生成一个新的vnode对象,

然后重复上面的动作,判断是一个dom节点p,通过createElement创建出来并插入div下面。

创建完成以后,会把dom引用挂在component.base上,把component对象引用挂在dom._component属性上,使其相互关联,方便节点修改、删除时使用。

3.虚拟dom算法-更新节点

如果nodeName发生变化,直接create一个新的dom,替换原来的dom,并对其进行回收。

Preact会把component(component.base)和dom(dom._component)相互关联起来,当数据变更时,将新的虚拟dom和真实的dom比较,并将diff更新(新增、删除)到dom中。

虚拟dom和真实dom做diff的时候,首先会去找dom上的__preactattr__属性,用于缓存dom的attributes。如果该属性有的话,就直接和属性缓存diff,如果没有的话,再去遍历attributes。如果一致,不会做任何操作,如果不一致,会更新dom和属性缓存。

4.虚拟dom算法-diff子节点

如果有key,将原始dom的子节点生成一个以key为key,以dom为value的map。循环新的vnode中的children,依次去map中查找对应key的节点进行diff,如果找到了做修改操作,没有找到做新增操作。每diff完一个节点,就将map中对应key值的dom置成undefined。最后循环结束以后,删除map中剩余的节点。

如果没有key,只能按照nodeName来进行diff。将原始dom子节点放在数组中。循环新的vnode中的children,依次从数组中查找nodeName相同的节点做diff,并将数组中已经diff完成的节点置成undefined。最后循环结束以后,同上,将数组中剩余的节点删除。

三、为什么用preact

1.类react库,继承了react的优点

利用虚拟DOM实现快速渲染

便捷的组件化封装

丰富的生态系统(可以通过兼容层无缝使用 React 生态系统中其他组件)

2.体积更小

同一个页面 使用preact、preact-compat要比react小得多

3.高性能

4.主流浏览器都可以兼容

通过polyfills可支持ie7和ie8

四、如何使用

1、直接使用preact

将babel转化jsx的函数替换成preact.h

2、react切换到preact

安装preact-compat,并把 react 和 react-dom 的 alias 设置为 preact-compat。通过这种方法,可以在不改变代码的情况下继续使用 React/ReactDOM 的语法结构。

 
   
140 次浏览       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开发平台最佳
更多...