前端开发中，滑动展示日志麻烦？这个组件来帮你

写在前面

在这个数据无比重要的时代，用户在网页上面的一系列操做，都须要用数据记录下来。在一个网页中，某个元素的点击数，展示数能够说是最基本的指标了。点击数很简单，用户点击的时候，上报一条点击日志便可。可是展示日志，就稍微麻烦一点了。特别是对于必需要上下滑动页面才会出现的元素。滑动展示的场景，在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来实现。

写在后面

组件代码地址在：这里

之因此开发这个组件，确实是由于以前和现在的工做中确实遇到了各个业务线都须要滑动展示日志的状况，当时都是在业务中直接搞，和业务耦合度较大，不容易复用。彻底抽离出来后，就能够直接使用了。本文简单介绍了组件，以及开发过程当中的一些思考，符合预期。最后，欢迎关注公众号: