乐趣区

关于react.js:记录一次有趣的React项目埋点过程

公司产品有个埋点需要,当用户在点击日志记录时,上报日志列表中最新记录和以后记录的信息,因为组件间间隔比拟远,没方法间接拿到多层之外组件中的数据,因而用了 hack 的方法解决,记录在此,以飨读者。

背景介绍

笔者正在参加的我的项目有一个日志记录核心性能,相似于上图所示的告诉核心。产品给的需要如下:

用户点击某条记录时埋点 ——> 须要发送以后的记录类型及创立工夫,及日志列表中最新记录的创立工夫、最新记录与以后记录的距离数。

在 React 中,数据次要是通过单向数据流向子组件传递,仔细分析后发现通过传统形式不好拿。
首先用户点击的记录没有最新记录的信息,所以也不会有最新记录的创立工夫,其次,记录是懒加载,所以最新记录与以后记录之间的距离数也没法间接拿。

如果通过重构的形式在组件中传递这些数据必定是能够的,然而要花费很大的代价,且不说波及到多层业务组件层层嵌套,就算是把数据放到 Redux 中存储,也须要破费比拟多的计算资源,稍有不慎也会导致组件的非必要渲染。

这次应用的 hack 形式,技术原理并不简单,核心思想是在页面中拿到 DOM,并应用 DOM 节点的原生办法进行计算,失去想要的数据。

拿到最新记录的日志类型和工夫戳

与规范 html 统一,在 React 中反对应用 data-* 属性来嵌入自定义数据:

<div className="item" data-time={item.time} onClick={this.handleClick}>
一个 DIV 节点
<div/>

比方在下面的 div 标签中,通过应用 data-time 属性,将以后记录的 time 字段绑定到了标签上。
绑定当前如何获取呢,同样能够应用浏览器的原生办法, 如:document.getElementById()
document.querySelectorAll(), 这里应用第二种形式演示:

// 获取到日志记录 DOM 列表(每一条为一个 DOM 节点)const itemList = document.querySelectorAll('.item')
// 获取用户点击的 DOM 节点在 list 中的地位
const clickedRecord = [].indexOf.call(itemList, e.currentTarget)
// 获取第一个 DOM 节点上绑定的 time 数据
const firstItemTime = itemList[0].getAttribute('data-time')

简述一下过程:通过日志 item 独有的 className 标签拿到日志记录的 DOM 列表,而后通过鼠标点击对象的 currentTarget 属性拿到以后点击的日志 DOM 对象,进而计算以后日志在列表中所处的地位。最新记录的创立工夫通过 DOM 节点的 getAttribute 办法拿到绑定的数据。

总结

React 官网并不举荐间接操作 DOM,但间接操作 DOM 确实能解决很多非凡的业务需要(香啊),所以开发者敌人在闲来无事的时候还是要把 DOM 的办法捡起来,说不定啥时候就用上了。另外须要阐明的是这只是一个长期的埋点需要,如果是我的项目中比拟外围的性能点,采纳这种形式还须要认真评估。

退出移动版