reactjs - React.forwardRef 没有它已经是可能的了，那么它有什么用呢？

Question

我对 React.forwardRef 的观点感到困惑.正如其 documentation 中所述，据我所知，它的主要用途是用于 父组件 访问 DOM 的元素子组件 .但我已经可以做到这一点，甚至不必使用它。
这是一个代码示例，您可以将其插入 CodeSandbox 并查看它是否有效:

import React, {useRef, useEffect} from "react";
import "./styles.css";

const ChildComponent = (props) => {

  useEffect( ()=> {
    props.callbackFunction()
  })

  return(
    <div ref={props.fRef}>
      {"hello"}
    </div>
  )
}


export default function App() {
  const callbackFunction = () => {
    console.log("The parent is now holding the forwarded ref to the child div: ")
    console.log(forwardedRef)
  }

  const forwardedRef = useRef(null)

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <ChildComponent name="gravy" callbackFunction={callbackFunction} fRef={forwardedRef}/>
    </div>
  );
}

或者这里是这个例子的嵌入。老实说，我对这个有点陌生，我不知道嵌入是如何工作的，也不知道有人摆弄嵌入是否会改变我原来的沙箱，所以我犹豫不决。但它在这里。
Example Forwarding Ref
在示例中，父项 应用() 组件成功地将 ref 传递给子组件附加到其呈现的子组件 div .渲染后，它会向父级调用回调函数。然后，父级执行控制台日志，证明其转发的 ref 现在拥有子级的 div。而这一切都是在没有 React.forwardRef 的情况下完成的.
那么 React.forwardRef有什么用？ ?

Answer 1

你完全正确，你可以做你所描述的。缺点是您必须公开 API(即:fRef Prop )才能使其工作。如果您是构建应用程序的独立开发人员，这没什么大不了的，但它可能会更成问题，例如。如果您正在维护一个带有公共(public) API 的开源库。

在这种情况下，库的使用者将无法访问组件的内部结构，这意味着您必须以某种方式为他们公开它。您可以简单地按照示例中的建议进行操作并添加一个命名 Prop 。事实上，这就是 React 16.3 之前的库所做的。没什么大不了的，但你必须记录它，以便人们知道如何使用它。理想情况下，您还需要某种每个人都使用的标准，以免混淆(许多库使用 innerRef 命名约定)，但必须对此达成一些共识。所以一切都是可行的，但也许不是理想的解决方案。

使用 forwardRef , 将 ref 传递给组件会按预期工作。 ref prop 已经在 React 中标准化了，所以你不需要去查看文档来弄清楚如何传递 ref 或者它是如何工作的。但是，您描述的方法完全没问题，如果它满足您的需求，请务必采用。