看完你也想编写本身的react插件

副标题&＃8212;-为何我要写这个 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';
// 挪用
className="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);
// 挪用
className="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,iVBORw0KGgo#ANSUhEUg#AE#ABCAY#AfFcSJ#AAXNSR0IArs4c6Q#ARnQU1BAACxjwv8YQU#AJcEhZcwAADsQ#7EAZUrDhs#ANSURBVBhXYzh8+PB/AAffA0nNPuCL#AAElFTkSuQmCC',

是否是很眼熟 ?，假如你熟习 jquery.lazyload，那末你只需相识以下几个设置项即可：

• js_effect: 指定元素显现的动画结果，基于velocity.js动画完成。运用之前需加载velocity.js。
• css_effect: 指定元素显现的动画结果，基于animate.css动画完成。运用之前需装置animate.css。

• parent: 用于指定动画结果作用于元素的哪一个父级元素。可取值：

  • 父元素的 selector 选择器（字符串）
  • 父级层级 level（整数）
• node_type: 指定 react 将天生的元素范例，默许为&＃8217;img&＃8217;。
• 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);
// 挪用
className="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);
// 挪用
className="lazy"
src={'http://zhansingsong.github.io/lazyimg/22.4582fc71.jpg'}
/>;

直接上结果了 ?

• 指定 parent 设置项指定父级元素动画结果

singsong: 为何懒加载的动画结果只作用于目的元素，某些条件下作用于目的元素的父级元素会有意想不到结果哦 ?。

直接上结果了 ?

3. react 组件式 placeholder

singsong: 传统的 placeholder 一般都是由图片来替代，为何不能用组件来定制，如许可扩展性更高。完整能够挣脱设计师的约束，咋们开辟自由发挥?! 想一想有木有有点小鸡冻 ? ~~

• 先定义 placeholder 组件

import React from 'react';
import './style.scss';
export default props => {
let { className, text, img, children } = props;
return (
className={['placeholder', className]
.filter(item => {
if (item) {
return item;
}
})
.join(' ')}
>
{img && }
{text && {children || text}}