共计 1274 个字符，预计需要花费 4 分钟才能阅读完成。
公司产品有个埋点需要，当用户在点击日志记录时，上报日志列表中最新记录和以后记录的信息，因为组件间间隔比拟远，没方法间接拿到多层之外组件中的数据，因而用了 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 的办法捡起来，说不定啥时候就用上了。另外须要阐明的是这只是一个长期的埋点需要，如果是我的项目中比拟外围的性能点，采纳这种形式还须要认真评估。