React 自定义钩子：从钩子返回引用与将引用作为钩子参数传递

Question

考虑到我有一个自定义钩子，它使用一个或多个

refs

到 DOM 元素，我看到了两种不同的方式来编写/使用这样的钩子（而且我知道可能还有更多细微差别 - 例如回调引用）。

选项 1：从自定义挂钩返回

ref

并在组件中使用它：

const Option1 = () => {
  const hooksRef = myCustomHookReturninARef()
  
  return <div ref={hooksRef}>Using returned ref as prop.</div>
}

选项 2：在组件中创建

ref

并将其传递给自定义钩子：

const Option2 = () => {
  const componentsRef = React.createRef()
  
  myCustomHookExpectingRefArgument(componentsRef)
  
  return <div ref={componentsRef}>Using created ref as prop..</div>
}

我一直在使用这两个选项，它们似乎都工作正常。我知道这可能是一个固执己见的问题，但是：

使用第一种方法与第二种方法相比有一些明显的缺点吗？

Answer 1

我来这里是因为我自己也有同样的困境:-)。我的2分钱：

• 如果钩子返回引用，则钩子用户可以变得更加简洁，因为不必创建它。
• 另一方面，如果用户已经拥有来自不同引用返回钩子的引用，他们可能必须组合两个不同的引用。虽然这可能是一项简单的任务，但当我处于那种情况时，它确实让我绊倒了。

也许一个人可以通过接收和返回裁判来获得两全其美的效果？如果钩子没有获得引用，那么它只会创建一个。无论哪种方式，它都可以返回引用。

Answer 2

不是 React 大师，但从我的角度来看，使用

Option1

的唯一缺点是你必须验证返回值是

ref

，从计算角度来看没有区别