简介
ta-react-polymorphic-tracking 是一个基于 React 的跟踪埋点库，它封装了淘宝统一的跟踪埋点 API，并提供了一系列高阶组件和 Hooks，帮助开发者方便地进行埋点操作。
安装使用
首先，你需要将 ta-react-polymorphic-tracking 安装到你的项目中：
npm install --save ta-react-polymorphic-tracking
然后，在你的项目中使用它：
-- -------------------- ---- -------
------ - -------------- - ---- --------------------------------
----- ----------- ------- --------------- -
------------------- -
-- ---- -- --
---------------------------
-
------------- -
-- --------
-----------------------
---- ---------
------- -
------- --------
----- ------
-
---
-
-------- -
------ -
---- ----------- -- ------------------------- --------
--
-
-
-- ----
------ ------- ----------------------------在上面的例子中，withPageTracer 是一个高阶组件，它为组件提供了 trackPageView 和 trackClick 方法，这两个方法用于上报页面 PV 埋点和点击事件埋点。
API 说明
ta-react-polymorphic-tracking 提供了以下高阶组件和 Hooks：
withPageTracer 高阶组件
为页面组件提供跟踪埋点功能，包括上报页面 PV 埋点、更新页面跟踪参数等。
-- -------------------- ---- -------
------ - -------------- - ---- --------------------------------
----- ----------- ------- --------------- -
------------------- -
-- ---- -- --
---------------------------
-
-------- -
----- - ---------- - - -----------
------ -
------ ---------- -- ------------- -------
--
-
-
------ ------- ----------------------------通过使用 withPageTracer 高阶组件，组件就能够通过 this.props 访问到 trackPageView 和 pageParams 这两个属性，trackPageView 用于上报页面 PV 埋点，pageParams 用于保存页面跟踪参数。
withComponentTracer 高阶组件
为组件提供跟踪埋点功能，包括上报点击事件埋点、更新组件跟踪参数等。
-- -------------------- ---- -------
------ - ------------------- - ---- --------------------------------
----- ----------- ------- --------------- -
------------- -
-- --------
-----------------------
---- ---------
------- -
------- --------
----- ------
-
---
-
-------- -
------ -
---- ----------- -- ------------------------- --------
--
-
-
------ ------- ---------------------------------通过使用 withComponentTracer 高阶组件，组件就能够通过 this.props 访问到 trackClick 和 componentParams 这两个属性，trackClick 用于上报点击事件埋点，componentParams 用于保存组件跟踪参数。
usePageTracer Hook
为函数式组件提供跟踪埋点功能，包括上报页面 PV 埋点、更新页面跟踪参数等。
-- -------------------- ---- -------
------ - ------------- - ---- --------------------------------
-------- ------------------ -
----- - -------------- ---------- - - ----------------
------------ -- -
-- ---- -- --
----------------
-- ----
------ -
------ ---------- -- ------------- -------
--
-
------ ------- ------------通过使用 usePageTracer Hook，函数式组件就能够通过调用 usePageTracer 得到 trackPageView 和 pageParams 这两个属性，trackPageView 用于上报页面 PV 埋点，pageParams 用于保存页面跟踪参数。
useComponentTracer Hook
为函数式组件提供跟踪埋点功能，包括上报点击事件埋点、更新组件跟踪参数等。
-- -------------------- ---- -------
------ - ------------------ - ---- --------------------------------
-------- ------------------ -
----- - ----------- --------------- - - ---------------------
-------- ------------- -
-- --------
------------
---- ---------
------- -
------- --------
----- ------
-
---
-
------ -
---- --------------------------- --------
--
-
------ ------- ------------通过使用 useComponentTracer Hook，函数式组件就能够通过调用 useComponentTracer 得到 trackClick 和 componentParams 这两个属性，trackClick 用于上报点击事件埋点，componentParams 用于保存组件跟踪参数。
示例代码
下面是一个完整的使用示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - --------------- ------------------- - ---- --------------------------------
----- --- ------- --------------- -
------------------- -
---------------------------
------------- -- -
----------------------------- --- ------------ ---
-- ------
-
------------- -
-----------------------
---- ---------
------- -
------- --------
----- ------
-
---
------------- -- -
---------------------------------- --- -------------- ---
-- ------
-
-------- -
----- - ----------- --------------- - - -----------
------ -
-----
--------- ----------
---- ----------- -- ------------------------- --------
------ ---------- -- ------------- -------
------ --------------- -- ------------------ -------
------
--
-
-
----- --------- - -----------------------------------------
-------- ------------ -
------ ---------- ---
-
------ ------- ------上面的代码展示了如何在 React 中使用 ta-react-polymorphic-tracking 实现跟踪埋点功能。其中，withPageTracer 和 withComponentTracer 高阶组件分别用于为页面组件和普通组件提供跟踪埋点功能，trackPageView 和 trackClick 方法用于上报页面 PV 和点击事件埋点，pageParams 和 componentParams 属性用于保存页面和组件跟踪参数。最后，我们将高阶组件组合在一起，实现了一个具有跟踪埋点功能的 React 应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005725a81e8991b448e878b