巧用React HOC和Intersection Observer，玩转前端曝光埋点方案

2023-10-01 04:10:11

曝光埋点简介

曝光埋点是指记录某个商品（dom元素）出现在指定视图下的频率，平台可通过大数据分析出用户的习惯，从而达到增加用户的购买力的效果。传统曝光埋点方案通过监听滚动事件和计算目标元素与视图之间的距离来实现。当某个元素的至少50%出现在用户视窗时，就触发曝光事件。但是，这种方法有严重的性能问题，因为我们需要对页面上的每一个可能曝光的元素都添加滚动监听器，这会带来巨大的性能开销，尤其是当页面上有大量的动态内容时。

Intersection Observer介绍

Intersection Observer API提供了一种更有效的方式来监听元素是否出现在指定视图下。它是一种异步API，可以让我们在元素进入或离开视图时触发回调函数。这样，我们就只需要为那些可能曝光的元素添加监听器，而不用为页面上的每一个元素都添加监听器。

Intersection Observer的优势

性能优势：Intersection Observer API比传统滚动监听器具有显著的性能优势。因为它只会在元素进入或离开视图时触发回调函数，而滚动监听器会随着页面的滚动而不断触发。因此，Intersection Observer API可以减少浏览器的计算量，提高页面的加载速度和性能。
可靠性优势：Intersection Observer API的触发条件是基于元素与视图的相交情况，而滚动监听器是基于页面的滚动位置。因此，Intersection Observer API可以更可靠地检测元素是否曝光，而滚动监听器可能会受到页面布局、滚动速度等因素的影响。
兼容性优势：Intersection Observer API在主流浏览器中都得到了广泛的支持，包括Chrome、Firefox、Edge、Safari等。因此，我们可以放心地在前端项目中使用它，而不用担心兼容性问题。

结合React HOC实现曝光埋点

在React项目中，我们可以使用高阶组件(HOC)来封装Intersection Observer API，并将其集成到我们的组件中。这样，我们就可以轻松地为组件添加曝光埋点功能，而不用直接使用Intersection Observer API。

import React, { useState, useEffect } from "react";
import { useIntersection } from "react-intersection-observer";

const withIntersectionObserver = (WrappedComponent) => {
  return (props) => {
    const [isIntersecting, setIsIntersecting] = useState(false);
    const ref = useRef();

    const options = {
      rootMargin: "0px",
      threshold: 0.5,
    };

    const handleIntersection = (entries) => {
      const entry = entries[0];
      setIsIntersecting(entry.isIntersecting);
    };

    useEffect(() => {
      if (ref.current) {
        const observer = new IntersectionObserver(handleIntersection, options);
        observer.observe(ref.current);

        return () => {
          observer.disconnect();
        };
      }
    }, [ref]);

    return (
      <WrappedComponent
        {...props}
        isIntersecting={isIntersecting}
        ref={ref}
      />
    );
  };
};

export default withIntersectionObserver;

我们只需要将这个HOC应用到我们的组件上，即可为组件添加曝光埋点功能。

import React from "react";
import withIntersectionObserver from "./withIntersectionObserver";

const MyComponent = (props) => {
  const { isIntersecting } = props;

  useEffect(() => {
    if (isIntersecting) {
      // Do something when the component is visible
    }
  }, [isIntersecting]);

  return (
    <div>
      <h1>My Component</h1>
      <p>This component is visible: {isIntersecting ? "Yes" : "No"}</p>
    </div>
  );
};

export default withIntersectionObserver(MyComponent);

优化和扩展

Intersection Observer API和React HOC为我们在前端项目中实现曝光埋点方案提供了一种非常灵活和强大的方式。我们可以根据自己的需要进行定制和扩展，以满足不同的业务场景。例如，我们可以通过调整Intersection Observer的选项来控制元素进入或离开视图时的触发时机，或者我们可以根据元素的曝光次数或持续时间来进行数据分析。

总结

本文介绍了如何利用React HOC和Intersection Observer API在前端项目中实现曝光埋点方案。这种方案具有性能优势、可靠性优势和兼容性优势。通过结合使用React HOC和Intersection Observer API，我们可以轻松地为组件添加曝光埋点功能，并根据需要进行定制和扩展。