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

Clect 发布于2019-08-23 14:11 / 737人阅读

摘要：使用者需要做的，就是完成回调函数里的逻辑即可，十分简单。如果你需要异步生成，你需要设置参数为元素展现时的回调函数，接收和作为参数。多次展现时，是否每次都触发回调函数组件里监听滑动事件时，用了。

写在前面

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

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

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

}


ReactDOM.render(, 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来实现。

写在后面

组件代码地址在：这里

之所以开发这个组件，确实是因为之前和如今的工作中确实遇到了各个业务线都需要滑动展现日志的情况，当时都是在业务中直接搞，和业务耦合度较大，不容易复用。完全抽离出来后，就可以直接使用了。本文简单介绍了组件，以及开发过程中的一些思考，符合预期。最后，欢迎关注公众号:

云服务器 GPU云服务器前端组件开发前端组件前端组件维护通用前端组件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100221.html

日志排查问题困难？分布式日志链路跟踪来帮你

摘要：当前线程的子线程会继承其父线程中的的内容。若希望在线程池与主线程间传递，需配合和使用。一、背景开发排查系统问题用得最多的手段就是查看系统日志，在分布式环境中一般使用ELK来统一收集日志，但是在并发大时使用日志定位问题还是比较麻烦，由于大量的其他用户/其他线程的日志也一起输出穿行其中导致很难筛选出指定请求的全部相关日志，以及下游线程/服务对应的日志。二、解决思路每个请求都使...

EasonTyler 2019-08-19 10:32 评论0 收藏0
找工作怎么办，拉勾小程序来帮你

摘要：于是我便萌发了一个新想法，自己手撸一个拉勾小程序。开发工具与资源平台微信开发者工具用于敲网页代码，但是最主要用来进行手机效果预览。微信小程序开发者文档微信小程序开发的文档，资源库，以及规范可以模拟我们想要的数据，非常方便。引言现在的前端有各种各样的新知识和新框架，小程序才出生几年，就已经火到这种程度了，所以作为前端学习者，这个新技能我们是一定要尽快get到的。学习小程序最好的方法就...

junbaor 2019-08-22 17:56 评论0 收藏0
想要更精准的小程序模版消息推送？我们来帮你实现

摘要：在用户喜爱的众多功能中，使用率最高的是模版消息推送。模版消息推送数的量级也由早期每天几百条，变为后来的每天数百万条。平台支持少知晓云已经支持包括微信小程序和支付宝小程序在内的各大小程序平台的消息推送，对平台的支持也将在近期上线。两年多前，为了让更多的人找到好玩、好用的小程序，我们成立了「知晓程序」。再后来，我们推出了后端云服务平台——知晓云，帮助大家降低创业成本，提升开发效率。「...

RobinTang 2019-08-23 16:41 评论0 收藏0
[译] 前端攻略-从路人甲到英雄无敌二：JavaScript 与不断演化的框架

摘要：一般来说，声明式编程关注于发生了啥，而命令式则同时关注与咋发生的。声明式编程可以较好地解决这个问题，刚才提到的比较麻烦的元素选择这个动作可以交托给框架或者库区处理，这样就能让开发者专注于发生了啥，这里推荐一波与。本文翻译自FreeCodeCamp的from-zero-to-front-end-hero-part。继续译者的废话，这篇文章是前端攻略-从路人甲到英雄无敌的下半部分，在...

roadtogeek 2019-08-19 18:25 评论0 收藏0