如何为用户分析编写重构HOC?

时间:2017-12-23 02:22:54

标签: reactjs recompose

我目前正在发送没有HOC的用户分析跟踪事件,如下所示:

import React from 'react';

class NamePage extends Component {

  componentDidMount() {
    this.context.mixpanel.track('View Page: NamePage');
  }
  render() {
  ...
  }
}

NamePage.contextTypes = {
    mixpanel: PropTypes.object.isRequired
};

export default NamePage;

鉴于99%的网页都需要此跟踪功能,我知道这一点,我应该将我的网页包装在一个重构的HOC中。

可以做类似的事情:

import React from 'react';
import withTracking from '../hoc/withTracking';

class NamePage extends Component {

  render() {
  ...
  }
}
export default withTracking(NamePage, {
  eventTitle: 'View Page: NamePage',
});

这可能吗?我正确设置了吗?是否有更好的方法为此目的添加HOC?

谢谢

1 个答案:

答案 0 :(得分:2)

看看lifecycle method。它使用您想要的所有生命周期方法的对象,并返回一个HOC,它将向组件添加方法。

我建议你稍微更改withTracking API。您可以通过使用eventTitle参数跟踪工厂函数来使其可组合。

 import React from 'react';
 import {lifecycle, compose} from recompose;

 export function withTracking(eventTitle) {
     return lifecycle({
         componentDidMount() {
             this.context.mixpanel.track(eventTitle);
         }
     });
 }

 const class NamePage extends Component {
     render(){
         ...
     }
 }

 export default withTracking('View Page: NamePage')(NamePage);

 // and now you can compose withTracking with some other HOCs if needed
 // for example:

 export default compose(
     withTracking('View Page: NamePage'),
     someAnotherHOC,
     someAnotherHOC2
 )(NamePage)