react中关于组件功能（非ui）的复用，在使用上的理解

背景需求：

有N个react单页面应用，想要在这些页面ComponentDidMount后，进行埋点（访问地址，用户IP等等），并且有N个页面，均需要实现该功能。想要将埋点这个功能抽离出来，供各个页面组件复用。
方案一：
使用高阶组件反向继承的方式实现，在该组件componentDidMount()内， a.调用super.componentDidMount()
b.埋点
方案二：
使用类继承的方式，定义一个基类，基类提供一个埋点的方法，在各个想要使用该功能的子组件 的componentDidMount()内，调用该父类方法。

2种我都试了下，方案二实现之后，更像是一个utils.js，完全可以通过import 的 方式引入，使用它。
就像react官网说的：

在 Facebook，我们在成百上千个组件中使用 React。我们并没有发现需要使用继承来构建组件层次的情况。

Props 和组合为你提供了清晰而安全地定制组件外观和行为的灵活方式。注意：组件可以接受任意 props，包括基本数据类型，React 元素以及函数。

如果你想要在组件间复用非 UI 的功能，我们建议将其提取为一个单独的 JavaScript 模块，如函数、对象或者类。组件可以直接引入（import）而无需通过 extend 继承它们。

的确，这并不是需要使用继承来构建组件层次的情况。

理解

对于我这类问题，就是普遍的横切关注点的问题，解决这类问题react提供了如下三种方案：

1. 高阶组件
2. rendor props
3. 自定义hooks

以上是我个人的理解，初转前端，不知道对不对，还需要继续摸索使用才能有更深的理解吧
欢迎批评指正，期待被指点一二