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

简介: 前端开发中,滑动展现日志麻烦?这个组件来帮你

640.gif

写在前面


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

元素展现时的回调函数,接收 indexdom作为参数。

  • 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来实现。


写在后面


组件代码地址:这里


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

相关实践学习
日志服务之使用Nginx模式采集日志
本文介绍如何通过日志服务控制台创建Nginx模式的Logtail配置快速采集Nginx日志并进行多维度分析。
相关文章
|
1月前
|
前端开发
前端通过input标签封装Upload组件实现文件上传
前端通过input标签封装Upload组件实现文件上传
117 0
|
1月前
|
前端开发 数据可视化 JavaScript
前端图形学实战: 从零开发一款轻量级滑动验证码组件(vue3 + vite版)
前端图形学实战: 从零开发一款轻量级滑动验证码组件(vue3 + vite版)
189 0
|
25天前
|
Perl
CocoaLumberjack增强异步日志组件BITCocoaLumberjack的使用
CocoaLumberjack增强异步日志组件BITCocoaLumberjack的使用
31 1
|
25天前
|
前端开发 JavaScript
前端项目公共组件封装思想
该文介绍了如何封装通用组件,如表单搜索、表格展示和分页器。首先,通过抽离出公共部分,创建`TableContainer`组件,利用具名插槽插入`navbar`和`table`,并通过props传递标题。然后在父组件中使用具名插槽和子组件实现具体功能。文中还展示了更复杂的组件封装示例,通过props实现数据双向绑定,以`el-pagination`为例,利用`sync`修饰符和`computed`属性监听并更新父组件状态,实现分页功能。文章最后提到了内容来源于哪。
|
12天前
|
前端开发
前端react入门day02-React中的事件绑定与组件
前端react入门day02-React中的事件绑定与组件
|
18天前
|
JavaScript 前端开发 API
【前端--Vue】组件之间的多种通信方式,一文彻底搞懂组件通信!
【前端--Vue】组件之间的多种通信方式,一文彻底搞懂组件通信!
【前端--Vue】组件之间的多种通信方式,一文彻底搞懂组件通信!
|
18天前
|
资源调度 JavaScript 前端开发
【前端开发---Vue2】史上最详细的Vue入门教程(六) --- 工程化开发和脚手架、组件注册
【前端开发---Vue2】史上最详细的Vue入门教程(六) --- 工程化开发和脚手架、组件注册
【前端开发---Vue2】史上最详细的Vue入门教程(六) --- 工程化开发和脚手架、组件注册
|
24天前
|
前端开发 网络架构
1天搞定SpringBoot+Vue全栈开发 (8)前端路由VueRouter(进行组件切换)
1天搞定SpringBoot+Vue全栈开发 (8)前端路由VueRouter(进行组件切换)
|
1月前
|
前端开发 JavaScript Java
浅谈企业级前端应用中的组件概念和具体的应用
浅谈企业级前端应用中的组件概念和具体的应用
24 1
|
1月前
|
移动开发 前端开发
ruoyi-nbcio-plus的Vue3前端升级组件后出现的问题(二)
ruoyi-nbcio-plus的Vue3前端升级组件后出现的问题(二)
29 1

热门文章

最新文章