如何为用户分析编写重构 HOC?
How to write a recompose HOC to User Analytics?
我目前正在发送没有像这样的 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?
谢谢
看看lifecycle method。它需要包含您想要的所有生命周期方法的对象和 returns 一个将向组件添加方法的 HOC。
我建议您稍微更改一下 withTracking API。您可以通过将 withTracking 设置为带有 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)
我目前正在发送没有像这样的 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?
谢谢
看看lifecycle method。它需要包含您想要的所有生命周期方法的对象和 returns 一个将向组件添加方法的 HOC。
我建议您稍微更改一下 withTracking API。您可以通过将 withTracking 设置为带有 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)