看完你也想編寫本身的 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';

// 調用
<Lazyimg
  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);

// 調用
<Lazy
  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,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);
// 調用
<Lazy
  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);
  // 調用
  <Lazy
    className="lazy"
    src={'http://zhansingsong.github.io/lazyimg/22.4582fc71.jpg'}
  />;

直接上效果了 ?

• 指定 parent 配置項指定父級元素動畫效果

singsong: 爲何懶加載的動畫效果只做用於目標元素，某些條件下做用於目標元素的父級元素會有意想不到效果哦 ?。

<div className="example">
  // 指定動畫效果做用於該父級元素
  <Title title="父級動畫效果" className="sub" />
  <div className="example-img">
    <Lazyimg
      className="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 (
    <div
      className={['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')} />,
});
// 調用
<Lazy
  className="lazy"
  src={'http://zhansingsong.github.io/lazyimg/22.4582fc71.jpg'}
/>;

直接上效果了 ?

singsong: 圖中小火焰有木有很耀眼 ~

接着咋們來看看組件式 placeholder 應用場景案例，直接上效果了 ?

上圖是分類頁經過定製顯示文案的 placeholder 組件來代替普通的灰色圖片，效果是否是看着還行 ?。這是我在實際項目中使用的案例。這裏小夥伴能夠自由發揮哈~。若是你有不錯 idea 能夠@我哈，先謝了！

4. 響應式圖片( picture / srcset )

爲了實現 web 應用的極致體驗，Progressive Web App 漸進式網頁應用程序愈來愈受到開發者們重視，其中響應式圖片就是其中一個重要技術項。爲了跟着大部隊，咋們也須要了解了解噢！

• srcset 特性實現響應式圖片

// dpr
  <Lazyimg
    className="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"/>
      <Lazyimg
      className="lazy"
      src={'http://zhansingsong.github.io/lazyimg/22.4582fc71.jpg'}
      js_effect="transition.expandIn"
    />
  </picture>

直接上效果了 ?

後語

這個插件是我由項目中提煉出的，我的用着還挺順手，就拿出與你們分享分享。另外，畢竟我的能力有限，若是你發現插件有問題或有什麼好的建議，也請告知一下，先這裏謝過了 ?。最後歡迎star?、歡迎watch?、歡迎fork?