共享tracking的逻辑
使用高阶组件能在很多的UI组件中追踪逻辑. 例如: 在许多组件中加入分析数据的追踪.
eg. Adding analytics tracking across various components.
- 一次实现,多次使用
- 易于剔除, 我们的组件还是能保持很好的测试性,不会被这个tracking组件影响.
import tracker from './tracker.js';
// 高阶组件
const pageLoadTracking = (ComposedComponent) => class HOC extends Component {
componentDidMount() {
tracker.trackPageLoad(this.props.trackingData);
}
componentDidUpdate() {
tracker.trackPageLoad(this.props.trackingData);
}
render() {
return <ComposedComponent {...this.props} />
}
};
// 用法
import LoginComponent from "./login";
const LoginWithTracking = pageLoadTracking(LoginComponent);
class SampleComponent extends Component {
render() {
const trackingData = {/** Nested Object **/};
return <LoginWithTracking trackingData={trackingData}/>
}
}
看完两件小事
如果你觉得这篇文章对你挺有启发,我想请你帮我两个小忙:
- 把这篇文章分享给你的朋友 / 交流群,让更多的人看到,一起进步,一起成长!
- 关注公众号 「IT平头哥联盟」,公众号后台回复「资源」 免费领取我精心整理的前端进阶资源教程