react-decorator-track解耦-埋点⽅案
简单说明
⽬的：与业务代码完全解耦 ⽀持 组件进⼊/离开数据埋点（同步/异步）、内部⽅法埋点（同步/异步） 说明：第⼀版本，是为了试验性⽬的，直接提供中间件源码，有需要的可以结合⾃⼰的业务，fork源码，进⾏修改即可 拿到代码后，可以根据⾃⼰的业务，需要修改埋点数据的data以及源码中的createTrackData⽅法即可，主要⽤于将data中的空值，⽤state来替换
引⼊
或者 cnpm install react-decorator-track --save
⽀持埋点类型
TrackPage：负责处理⽣命周期函数中的埋点
Track：负责处理⽅法事件的埋点
TrackPage
in类型:componentWillMount，记录进⼊页⾯的时间，及⾃带的数据（data）
@TrackPage({
in: {
data: { evt: 'in', test: '1' }
}
})
export default class xxxx extends React.Component {}
复制代码
out类型:componentWillUnmount，记录离开页⾯时的时间，及⾃带的数据（data）
@TrackPage({
out: {
data: { evt: 'out', test: '2', productCount: '' }
}
})
export default class xxxx extends React.Component {}
复制代码
inOut类型:componentWillMount 与 componentWillUnmount，记录进⼊页⾯的时间、离开页⾯时的时间以及页⾯的停留时间，和⾃带的数据（data）
@TrackPage({
mounted: {
data: { evt: 'in-out', test: '3', productCount: '' }
},
})
export default class xxxx extends React.Component {}
复制代码
mounted类型:ccomponentDidMount，记录挂载(同步/异步初始化数据)进⾏埋点数据
@TrackPage({
mounted: {
data: { evt: 'mount', test: '5', userCount: '', orderCount: '' }
},
})
export default class xxxx extends React.Component {}
复制代码
说明： data 是要使⽤的埋点数据，包含固定值的数据，和异步请求返回的数据，异步返回的数据需要在state中包含，这样在TrackPage、Track内部才能拿到正确的数据值，将state与data进⾏结合遍历，替换data中设置为空的值，
同时也可以，这四种类型结合着使⽤,⽐如这样
@TrackPage({
inOut: {
data: { evt: 'in-out', test: '3', productCount: '' }
},
mounted: {
data: { evt: 'mount', test: '5', userCount: '', orderCount: '' }
}
})
复制代码
Track
@Track({
data: { evt: 'func1', test: 'a', userCount: '' },
// execute: 'before'
})
async submit() {
console.log('提交')
const data = await new Promise(resolve => setTimeout(() => resolve('555'), 1000))
this.setState({ userCount: data })
}
复制代码
execute 默认为 after: ⽤于区分在动作完成前（同步）、后进⾏埋点操作（异步） 看⼀个demo
import React from 'react'
import './index.scss'
import { TrackPage, Track } from 'react-decorator-track'
@TrackPage({
in: {
data: { evt: 'in', test: '1' }
},
out: {
out: {
data: { evt: 'out', test: '2', productCount: '' }
},
inOut: {
data: { evt: 'in-out', test: '3', productCount: '' }
},
mounted: {
data: { evt: 'mount', test: '5', userCount: '', orderCount: '' }
}
})
export default class Home extends React.Component {
新新理论第一页
constructor(props){
super(props)
this.state = {
userCount: '-',
productCount: '-',
orderCount: '-'
}
}
/
/ 可加可不加
componentWillMount() {
// console.log('will')
}
getHomeCount() {
福建茶叶包装const data = {
userCount: '666',
productCount: '333',
orderCount: '999'
}
return new Promise(resolve => setTimeout(() => resolve(data), 1000))
}
async componentDidMount() {
// let data = HomeCount()
let data = HomeCount()
this.setState(data)
}
@Track({
data: { evt: 'func1', test: 'a', userCount: '' },
// execute: 'before'
})
async submit() {
console.log('提交')
const data = await new Promise(resolve => setTimeout(() => resolve('555'), 1000)) this.setState({ userCount: data })
}
// 可加可不加，
componentWillUnmount() {
console.log('准备离开')
舒曼童年情景}
render() {
let { userCount, productCount, orderCount } = this.state
return (
<div className="page-wrapper">
<PageTitle title="⾸页" />
预期结果<div className="row">
<div className="col-md-4">
<Link to="/user" className="color-box brown">
<p className="count">{userCount}</p>
<p className="count">{userCount}</p>
<p className="desc">
<i className="fa fa-user-o"></i>
<span>⽤户总数</span>
</p>
</Link>
</div>
<div className="col-md-4">
<Link to="/product" className="color-box green">
<p className="count">{productCount}</p>
<p className="desc">
<i className="fa fa-user-o"></i>
<span>商品总数</span>
</p>
</Link>
西华大学图书馆
</div>
<div className="col-md-4">
<Link to="/order" className="color-box blue">
<p className="count">{orderCount}</p>
<p className="desc">
<i className="fa fa-user-o"></i>
<span>订单总数</span>
</p>
</Link>
</div>
</div>
<div className="row">
<button className="btn" onClick={() => this.submit()}>提交测试</button>
</div>
</div>
)
}
}
复制代码
看⼀下结果： 进⼊页⾯时，执⾏了 in 和 mounted 埋点
componentDidMount中有异步请求，⽽埋点数据包含异步请求后的数据，因此，需要async componentDidMount() 来使⽤，如果不加 async，则埋点同步数据
通过从state中拿到 userCount，orderCount的正确值
离开页⾯
点击submit 如果按照 execute 默认after，则在动作完成后进⾏埋点，也就是等待异步提交结束后进⾏埋点
由图可以看到, userCount 为 异步提交后的结果
如果设置 execute 为 before，则在动作开始前进⾏埋点，
如何编写适合⾃⼰业务的埋点插件
1.弄明⽩decorator 装饰器的使⽤原理
2.通过装饰器⽅法，获取调⽤的组件或⽅法的实例，获取内部状态及参数
3.把⽅法或⽣命周期交给装饰器⽅法来执⾏，可以理解为代理
结语
以上demo和源码，⼤家可以随意拿去使⽤，改造成适合⾃⼰公司业务的埋点⽅案，技术⽆壁垒，欢迎⼤家⼀起交流学习田晓菲
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议