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

不是 React 高手，但从我的角度来看，使用 Option1 的唯一缺点是您必须验证返回的值是 ref，从计算的角度来看没有区别

反应自定义钩子：从钩子返回一个引用 vs 将引用作为钩子参数传递

1 个答案: