共计 2089 个字符，预计需要花费 6 分钟才能阅读完成。
写在前面
在这个数据无比重要的时代，用户在网页上面的一系列操作，都需要用数据记录下来。在一个网页中，某个元素的点击数，展现数可以说是最基本的指标了。点击数很简单，用户点击的时候，上报一条点击日志即可。但是展现日志，就稍微麻烦一点了。特别是对于必须要上下滑动页面才会出现的元素。滑动展现的场景，在 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 scrollToShowCb={this.handleShow} once={true} wait={500} async={false}>
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</ReactScrollToShowCb>
</div>
}
handleShow(index, dom) {
console.log(‘————————–‘);
console.log(`index: ${index}`);
console.log(‘dom:’, dom);
console.log(‘————————–‘);
}
}
ReactDOM.render(<App />, document.body);
ReactScrollToShowCb 的 children
支持 Class React Component，支持 Html Elements, 不支持 Functional React Component。可以为数组，也可以为单个元素。如果为数组，则数组里面的每个元素都必须为同样的类型，即 属于同一类 Class React Component 或者 同一种 Html Elements。
async
如果你需要异步生成 children，你需要设置 async 参数为 true.
scrollToShowCb
元素展现时的回调函数，接受 index 和 dom 作为参数。
once
多次展现时，是否每次都触发回调函数
wait
组件里监听滑动事件时，用了 throttle。wait 控制回调函数的触发频率。
为什么不支持 react 函数式组件直接作为 children
组件在实现是，用了 ref 来获取原始 DOM。而函数式组件不支持 ref。之前考虑在函数式组件外面新增一层 html，但是这样侵入性太强，直接破坏了原有的 DOM 结构，特别是在 children 是数组的情况下，会导致某些 css 失效。目前没有很好的方法在父组件中获取函数式组件的原始 DOM。遇到函数式组件，可以将 ReactScrollToShowCb 写到函数式组件内部 return 的 jsx 里面去。
支持异步生成 children, 但如果后续修改了 children, 那么组件将不会继续工作。
考虑到修改 children 的情况太多，可以新增，替换，删除等等，如果支持所有情况，需要在组件内处理大量因为 children 变化而带来的逻辑，这样会使组件的复杂程度大大增加，并且对性能也是一个考验。而本组件的定位就是实现一个简单的滑动展现回调功能，所以 react-scroll-to-show-cb 只支持了异步生成 children, 后续有对 children 的修改，组件将停止工作。如果有修改 children，然后滑动展现触发回调的需求，可以考虑实例化多个 react-scroll-to-show-cb 来实现。
写在后面
之所以开发这个组件，确实是因为之前和如今的工作中确实遇到了各个业务线都需要滑动展现日志的情况，当时都是在业务中直接搞，和业务耦合度较大，不容易复用。完全抽离出来后，就可以直接使用了。本文简单介绍了组件，以及开发过程中的一些思考。最后，欢迎关注公众号:
