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

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

待解决 悬赏分:50 - 离问题结束还有 501天19小时8分59秒
反对 0举报 0 收藏 0

我来回答

回答2