看完你也想编写自己的 react 插件
副标题: 为什么我要写这个 react 插件
图片懒加载是项目中常用的功能,然而现有 react 懒加载组件库,用着都不是很爽了 ?。概括一下有如下几点:
- 没有只针对 image 懒加载组件。多数组件库都内置了模块、组件、脚本、iframe 懒加载功能,而弱化了 image 懒加载功能。
- 不支持动画显示效果。
- 不灵活,可配置度不高。
- placeholder 不能组件化。
- 不支持响应式图片( picture / srcset )。
react-lazyimg-component
清楚自己想要什么样的组件,就自己动手撸呗 ?。于是乎,react-lazyimg-component 就诞生了 ?。咱们先来看看它的效果吧:
singsong: 如果大家有时间,窝还是鼓励大家自己动手实现一些小插件。
- PC 预览:
使劲猛击这里
- 手机预览(扫一扫):
什么情况需要使用它
1. 小巧轻便,简单易用,基本无学习成本
在那个 jQuery 一统天下的年代,撸代码就用 jQuery 一把梭。其中 jQuery.lazyload 是一个很常用图片懒加载插件。 可能很多像我一样的小伙伴们,懒加载就直接上 jQuery.lazyload,早已习惯了 jQuery.lazyload 使用。 于是自己就琢磨能否继承 jQuery.lazyload 使用方法同时保持 react 特有组件特性。这样可以很快上手~~~~~?
singsong: 这里只是继承了 jQuery.lazyload 配置特性,不是完全继承。毕竟 jQuery 与现在主流的 MVVM 框架思想截然不同。
如果小伙伴们熟悉 jQuery.lazyload , 完全没有学习成本直接上手 react-lazyimg-component 哈。 只说不是写,然并卵。那我们来看看它到底好用不:
安装
// npm
$> npm install react-lazyimg-component
// yarn
$> yarn add react-lazyimg-component
使用
// 引入
import Lazyimg, { withLazyimg } from 'react-lazyimg-component';// 调用
<LazyimgclassName="lazy"src={'http://zhansingsong.github.io/lazyimg/22.4582fc71.jpg'}
/>;
是不是很简单,有木有 ?。上述只是使用 react-lazyimg-component 的默认配置。 这里我们可以通过配置项来定制懒加载的行为:
// 引入 lazyimg
import Lazyimg, { withLazyimg } from 'react-lazyimg-component';
// 引入 volecity.js
import 'velocity-animate';
import 'velocity-animate/velocity.ui';// 配置
const config = {threshold: 100, // 指定触发阈值js_effect: 'transition.fadeIn', // 支持 velocity.js 动画效果
};
// 基于配置项生成对应 Lazy 组件
const Lazy = withLazyimg(config);// 调用
<LazyclassName="lazy"src={'http://zhansingsong.github.io/lazyimg/22.4582fc71.jpg'}
/>;
接下来我们来看看 react-lazyimg-component 都那些配置项:
threshold: 0, // 指定距离底部多少距离时触发加载
event: 'scroll', // 指定触发事件,默认为'scroll'
js_effect: undefined, // 显示图片的js动画效果
css_effect: undefined, // 显示图片的css动画效果
container: window, // 指定容器,默认为window
parent: undefined, // 可以指定动画效果作用于元素的哪个父级元素
appear: null, // 元素出现在可视窗口时触发appear钩子函数
load: null, // 元素图片的加载完后触发load钩子函数
error: null, // 图片加载出错时触发error钩子函数
node_type: 'img', // 指定生成的节点类型,默认为'img'
placeholder: // 占位元素,除了支持普通的图片外,还支持react组件。'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC',
是不是很眼熟 ?,如果你熟悉 jquery.lazyload,那么你只需了解如下几个配置项即可:
js_effect: 指定元素显示的动画效果,基于
velocity.js
动画实现。使用之前需加载velocity.js
。css_effect: 指定元素显示的动画效果,基于
animate.css
动画实现。使用之前需安装animate.css
。parent: 用于指定动画效果作用于元素的哪个父级元素。可取值:
- 父元素的 selector 选择器(字符串)
- 父级层级 level(整数)
node_type: 指定 react 将生成的元素类型,默认为'img'。
placeholder: 占位元素,除了支持普通的图片外,还支持 react 组件。
2. 支持 velocity.js、animate.css 动画效果库,及自定动画效果。同时还支持动画效果作用于父级元素。
- 指定 js-effect 配置项来配置 velocity.js 动画效果
注意:js-effect 依赖于 velocity.js。需要确保 velocity.js 已加载。
// 引入 lazyimg
import Lazyimg, { withLazyimg } from 'react-lazyimg-component';
// 引入 volecity.js
import 'velocity-animate';
import 'velocity-animate/velocity.ui';
// 配置
const config = {placeholder: 'loading.svg',js_effect: 'transition.fadeIn', // 支持 velocity.js 动画效果
};
const Lazy = withLazyimg(config);
// 调用
<LazyclassName="lazy"src={'http://zhansingsong.github.io/lazyimg/22.4582fc71.jpg'}
/>;
直接上效果了 ?
- 指定 css-effect 配置项来配置 animate.css 动画效果
注意:css-effect 依赖于 animate.css。需要确保 animate.css 已安装。
// 配置const config = {js_effect="transition.flipXIn" // 不会生效css_effect={['animated', 'rollIn']} // 定制 css 动画效果};const Lazy = withLazyimg(config);// 调用<LazyclassName="lazy"src={'http://zhansingsong.github.io/lazyimg/22.4582fc71.jpg'}/>;
直接上效果了 ?
- 指定 parent 配置项指定父级元素动画效果
singsong: 为什么懒加载的动画效果只作用于目标元素,某些条件下作用于目标元素的父级元素会有意想不到效果哦 ?。
<div className="example">// 指定动画效果作用于该父级元素<Title title="父级动画效果" className="sub" /><div className="example-img"><LazyimgclassName="lazy"src={'http://zhansingsong.github.io/lazyimg/22.4582fc71.jpg'}css_effect={['animated', 'flipInY']} // 定制 css 动画效果parent=".example" // 指定父级元素选择器,也可以指定父级层级level:2/></div>
</div>
直接上效果了 ?
3. react 组件式 placeholder
singsong: 传统的 placeholder 通常都是由图片来代替,为什么不能用组件来定制,这样可扩展性更高。完全可以摆脱设计师的束缚,咋们开发自由发挥?! 想想有木有有点小鸡冻 ?~~~~~~
- 先定义 placeholder 组件
import React from 'react';
import './style.scss';
export default props => {let { className, text, img, children } = props;return (<divclassName={['placeholder', className].filter(item => {if (item) {return item;}}).join(' ')}>{img && <img src={img} className="placeholder-img" />}{text && <span className="placeholder-text">{children || text}</span>}</div>);
};
- 指定 placeholder 配置项为上述定义的 placeholder 组件
// 配置
const Lazy = withLazyimg({js_effect: 'transition.perspectiveDownIn',placeholder: <Placeholder img={require('./loading.svg')} />,
});
// 调用
<LazyclassName="lazy"src={'http://zhansingsong.github.io/lazyimg/22.4582fc71.jpg'}
/>;
直接上效果了 ?
singsong: 图中小火焰有木有很耀眼~~~~~
接着咋们来看看组件式 placeholder 应用场景案例,直接上效果了 ?
上图是分类页通过定制显示文案的 placeholder 组件来代替普通的灰色图片,效果是不是看着还行 ?。这是我在实际项目中使用的案例。这里小伙伴可以自由发挥哈~~~~~。如果你有不错 idea 可以@我哈,先谢了!
4. 响应式图片( picture / srcset )
为了实现 web 应用的极致体验,Progressive Web App 渐进式网页应用程序越来越受到开发者们重视,其中响应式图片就是其中一个重要技术项。为了跟着大部队,咋们也需要了解了解噢!
- srcset 特性实现响应式图片
// dpr<LazyimgclassName="lazy"src={'http://zhansingsong.github.io/lazyimg/22.4582fc71.jpg'}srcSet="source_1x.png 1x, source_2x.png 2x, source_3x.png 3x, source_3.5x.png 3.5x"js_effect="transition.bounceIn"/>
直接上效果了 ?
singsong: 这里 srcset 配合 sizes 特性可以实现更好的效果
- picture 元素实现响应式图片
<picture><source media="(min-width: 650px)" srcSet="https://www.w3schools.com/tags/img_pink_flowers.jpg" /><source media="(min-width: 465px)" srcSet="https://www.w3schools.com/tags/img_white_flower.jpg"/><LazyimgclassName="lazy"src={'http://zhansingsong.github.io/lazyimg/22.4582fc71.jpg'}js_effect="transition.expandIn"/></picture>
直接上效果了 ?
后语
这个插件是我由项目中提炼出的,个人用着还挺顺手,就拿出与大家分享分享。另外,毕竟个人能力有限,如果你发现插件有问题或有什么好的建议,也请告知一下,先这里谢过了 ?。最后欢迎star?、欢迎watch?、欢迎fork?
看完你也想编写自己的 react 插件相关推荐
- 南京计算机审计行业工资,南京最新各行业平均工资曝光!看完分分钟想跳槽!...
原标题:南京最新各行业平均工资曝光!看完分分钟想跳槽! 工资是广大人民群众最关心的事情 年年平均工资都在涨 但小博似乎每年都是被平均的那个 可不是,当我看了这份 最近的南京冬季最新的平均工资 艾玛,感 ...
- 微信公众号活动策划方案怎么写?看完你也可以直接套用
一场成功的活动策划可以给企业带来相当可观的用户流量和曝光,前提是你的这份公众号活动策划方案是可执行和有回报的! 毫不夸张的说,我们在写公众号活动策划方案之前,只要你搞清楚以下这几点,这个方案就可以说是 ...
- android广告平台哪个好用,安卓手机里谁家系统广告最少?看完后想说:真怕小米MIUI垫底!...
原标题: 安卓手机里谁家系统广告最少?看完后想说:真怕小米MIUI垫底! 前天一篇文章评论中,有粉丝这样说: 可以看出这位粉丝真的十足小米粉!大师姐并非说小米不好哦,只是客观来说,小米家系统广告略微多 ...
- 看完我想说一句卧槽的“单例模式”
看完我想说一句卧槽的"单例模式" 单例模式是为了创建唯一个对象 单例模式分为两种 饿汉式 懒汉式 饿汉式 /*** 饿汉式* 特点:* 1.构造器私有* 2.一上来就new一个对象 ...
- 2022年五面蚂蚁、三面拼多多、字节跳动最终拿offer入职拼多多,看完你也可以了
写在2022年初的蚂蚁.头条.拼多多的面试总结 文章有点长,请耐心看完,绝对有收获!不想听我BB直接进入面试分享: 准备过程 蚂蚁金服面试分享 拼多多面试分享 字节跳动面试分享 总结 说起来开始进行面 ...
- Facebook电商新尝试:看完广告想买马上就可以买
在过去多年的试验中,所谓的"社交电商"未成气候,不过社交网络巨头Facebook仍在不停尝试,日前其推出一种新广告,鼓励用户在看完广告之后立刻购买商品. 媒体指出,Facebook ...
- 疑似华为Mate 30 Pro上手视频曝光 看完更想买了!
随着iPhone11系列的正式亮相,接下来最受关注的旗舰手机,自然就是新一代华为Mate系列旗舰.据官方此前公布的消息,全新的华为Mate30系列将于9月19日在德国慕尼黑正式发布,随着发布时间的临近 ...
- 不会吧,不会吧,全网最细汉诺塔讲解,不会有人不知道吧。面试官直呼内行,看完只想默默找水喝(C语言)
最干hanoi,看完直呼口干舌燥 Hanoi(汉诺塔问题) 一.什么是汉诺塔 二.分析 1.移动过程 2.应用思想+函数雏形 3.部分代码 三.总代码 四.递归调用 OVER Hanoi(汉诺塔问题) ...
- 微信H5视频抓娃娃,没你想的那么难,看完你也会
短短两周时间,在线抓娃娃从一个默默赚钱的行业变成了风口行业,从硬件到软件架构.从盈利到投资.从运营到推广,全方位解读都有了.唯独H5抓娃娃(特指移动web.微信抓娃娃),仍然很神秘. H5抓娃娃真的有 ...
最新文章
- c语言二叉排序树的创建与查找,C语言实现二叉查找树的插入和删除操作问题求教...
- 树形结构:寻找共同祖先
- 多线程访问全局变量和局部变量剖析
- CSS常用的选择器和优先级的权重问题
- 牛客14350 苦逼的单身狗
- 赣州师范高等专科学校计算机网络技术,赣州师范高等专科学校2021年招生简章...
- 洛谷——P1495 曹冲养猪
- ubuntu系统无法连接识别到adb设备和fastboot设备解决方法
- CocoaPods升级安装三方库报错
- html5 职工入职后台管理系统_后台管理平台
- 我是全网最硬核的高并发编程作者,CSDN最值得关注的博主,大家同意吗?(建议收藏)
- Oracle 11g 找不到文件 D:\app\Administrator\product\11.2.0\dbhome_1\oc4j\j2ee\oc4j_appli
- 常用的表情和含义 各种笑脸;-)
- 在Android Studio中隐藏APP的标题栏
- 信息收集[架构CMS数据库中间件]
- MicroPython_ESP8266_IoT——第一回 新手上路(开始之前要准备)
- 共享打印机出现0x00000569代码解决方案(亲测有效)
- 复用,多址的区分以及其涉及的相关数据速率
- 长途旅行出行准备清单
- C#仿QQ皮肤-TextBox 控件实现