寫在前面
在這個數據無比重要的時代，用戶在網頁上面的一系列操作，都需要用數據記錄下來。在一個網頁中，某個元素的點擊數，展現數可以說是最基本的指標了。點擊數很簡單，用戶點擊的時候，上報一條點擊日誌即可。但是展現日誌，就稍微麻煩一點了。特別是對於必須要上下滑動頁面纔會出現的元素。滑動展現的場景，在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 scrollToShowCb={this.handleShow} once={true} wait={500} async={false}>
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</ReactScrollToShowCb>
</div>
}
handleShow(index, dom) {
console.log('--------------------------');
console.log(`index: ${index}`);
console.log('dom:', dom);
console.log('--------------------------');
}
}
ReactDOM.render(<App />, document.body);
- ReactScrollToShowCb 的 children
支持 Class React Component ，支持 Html Elements, 不支持 Functional React Component 。可以爲數組，也可以爲單個元素。如果爲數組，則數組裏面的每個元素都必須爲同樣的類型，即 屬於同一類 Class React Component 或者 同一種 Html Elements。
- async
如果你需要異步生成children，你需要設置async參數爲true.
- scrollToShowCb
元素展現時的回調函數，接受 index 和dom作爲參數。
- once
多次展現時，是否每次都觸發回調函數
- wait
組件裏監聽滑動事件時，用了throttle。wait 控制回調函數的觸發頻率。
爲什麼不支持react函數式組件直接作爲children
組件在實現是，用了ref來獲取原始DOM。而函數式組件不支持ref。之前考慮在函數式組件外面新增一層html，但是這樣侵入性太強，直接破壞了原有的DOM結構，特別是在children是數組的情況下，會導致某些css失效。目前沒有很好的方法在父組件中獲取函數式組件的原始DOM。遇到函數式組件，可以將 ReactScrollToShowCb 寫到函數式組件內部return的jsx裏面去。
支持異步生成children, 但如果後續修改了children, 那麼組件將不會繼續工作。
考慮到修改children的情況太多，可以新增，替換，刪除等等，如果支持所有情況，需要在組件內處理大量因爲children變化而帶來的邏輯，這樣會使組件的複雜程度大大增加，並且對性能也是一個考驗。而本組件的定位就是實現一個簡單的滑動展現回調功能，所以react-scroll-to-show-cb只支持了異步生成children, 後續有對children的修改，組件將停止工作。如果有修改children，然後滑動展現觸發回調的需求，可以考慮實例化多個react-scroll-to-show-cb來實現。
寫在後面
之所以開發這個組件，確實是因爲之前和如今的工作中確實遇到了各個業務線都需要滑動展現日誌的情況，當時都是在業務中直接搞，和業務耦合度較大，不容易複用。完全抽離出來後，就可以直接使用了。本文簡單介紹了組件，以及開發過程中的一些思考。最後，歡迎關注公衆號:
