前端開發中，滑動展示日誌麻煩？這個組件來幫你

寫在前面

在這個數據無比重要的時代，用戶在網頁上面的一系列操做，都須要用數據記錄下來。在一個網頁中，某個元素的點擊數，展示數能夠說是最基本的指標了。點擊數很簡單，用戶點擊的時候，上報一條點擊日誌便可。可是展示日誌，就稍微麻煩一點了。特別是對於必需要上下滑動頁面纔會出現的元素。滑動展示的場景，在feed流形式的產品上十分常見。因此，一個輕量級的組件，react-scroll-to-show-cb 誕生了。

組件總體介紹

安裝：

npm install react-scroll-to-show-cb --save

該組件是基於React開發的，適用於採用react開發的項目。目前主流的react版本都支持。preact也支持，可是須要配置如下的alias :

alias: {
    "react": "preact-compat",
    "react-dom": "preact-compat"
}

使用者只須要將 react組件 或者 html element 直接塞到 react-scroll-to-show-cb 的childern裏面去，當對應的元素進入可視區域時，會觸發回調函數，而且返回必要的信息。使用者拿到這些信息，就可以上報展示日誌了。使用者須要作的，就是完成回調函數裏的邏輯便可，十分簡單。

組件用法

先看一個例子：

import React from 'react';
import ReactDOM from 'react-dom';
import ReactScrollToShowCb from'react-scroll-to-show-cb';

class App extends React.Component {
    
    render() {
        return <div>
            <ReactScrollToShowCb 
                onScrollToShow={this.handleShow}
                onInitEnd={this.handleInitEnd}
                once={true} 
                wait={500}>
                <div>1</div>
                <div>2</div>
                <div>3</div>
                <div>4</div>
                <div>5</div>
                <div>6</div>
                <div>7</div>
            </ReactScrollToShowCb>
        </div>
    }

    handleShow(index, dom) {
        console.log(`index: ${index}`);
        console.log('dom:', dom);
    }

    handleInitEnd(instance){
        console.log(instance);
    }

}


ReactDOM.render(<App />, document.body);

• ReactScrollToShowCb 的 children

支持 Class React Component ，支持 Html Elements, 不支持 Functional React Component 。能夠爲數組，也能夠爲單個元素。若是爲數組，則數組裏面的每一個元素都必須爲一樣的類型，即 屬於同一類 Class React Component 或者 同一種 Html Elements。

• async

若是你須要異步生成children，你須要設置async參數爲true.

• onScrollToShow

元素展示時的回調函數，接收 index 和dom做爲參數。

• onInitEnd

react-scroll-to-show-cb組件初始化後觸發，接收組件實例做爲參數。

• once

屢次展示時，是否每次都觸發回調函數

• wait

組件裏監聽滑動事件時，用了throttle。wait 控制回調函數的觸發頻率。

• ReactScrollToShowCb.Update

當ReactScrollToShowCb的children被更新時（新增child或者刪除child），須要手動調用Update這個靜態方法來更新ReactScrollToShowCb。這樣，新增的child也會有滑動展示的邏輯，被刪除的child也不會再繼續觸發滑動展示的邏輯。這對於在feed流中 【下拉刷新】和【上滑加載】的業務邏輯十分有用。Update接受一個參數：ReactScrollToShowCb的實例。這個實例能夠經過onInitEnd方法得到。

爲何不支持react函數式組件直接做爲children

組件在實現是，用了ref來獲取原始DOM。而函數式組件不支持ref。以前考慮在函數式組件外面新增一層html，可是這樣侵入性太強，直接破壞了原有的DOM結構，特別是在children是數組的狀況下，會致使某些css失效。目前沒有很好的方法在父組件中獲取函數式組件的原始DOM。遇到函數式組件，能夠將 ReactScrollToShowCb 寫到函數式組件內部return的jsx裏面去。

支持異步生成children、增長child、刪除child, 但若是後續修改了children, 那麼組件將不會繼續工做。

考慮到修改children的狀況太多，能夠新增，替換，刪除等等，若是支持全部狀況，須要在組件內處理大量由於children變化而帶來的邏輯，這樣會使組件的複雜程度大大增長，而且對性能也是一個考驗。而本組件的定位就是實現一個簡單的滑動展示回調功能，因此react-scroll-to-show-cb只支持了異步生成children。而增長child、刪除child須要手動調用Update來更新react-scroll-to-show-cb。 但如有對children的修改，組件將中止正常工做。若是有修改children，而後滑動展示觸發回調的需求，能夠考慮實例化多個react-scroll-to-show-cb來實現。

寫在後面

組件代碼地址在：這裏

之因此開發這個組件，確實是由於以前和現在的工做中確實遇到了各個業務線都須要滑動展示日誌的狀況，當時都是在業務中直接搞，和業務耦合度較大，不容易複用。徹底抽離出來後，就能夠直接使用了。本文簡單介紹了組件，以及開發過程當中的一些思考，符合預期。最後，歡迎關注公衆號: