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

Question

我对React.forwardRef. 正如其文档中所解释的，我知道它的主要用途是让父组件访问子组件的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>
  );
}

或者这里是这个例子的嵌入。老实说，我对这个有点陌生，我不知道嵌入是如何工作的，也不知道有人摆弄嵌入是否会改变我原来的沙箱，所以我犹豫不决。但它在这里。 示例转发参考

在示例中，父App()组件成功地将 ref 传递给子组件，子组件将其附加到其呈现的div。渲染后，它会向父级调用回调函数。然后，父级执行控制台日志，证明其转发的 ref 现在拥有子级的 div。而这一切都是在没有React.forwardRef.

那么有什么用React.forwardRef呢？

Answer 1

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

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

使用forwardRef，将 ref 传递给组件可以按预期工作。该ref道具已经标准化的反应，所以你不必去看看文档，以找出如何通过裁判下来或它是如何工作。但是，您描述的方法完全没问题，如果它满足您的需求，请务必采用。