使用 React.forwardRef 与自定义 ref prop 的价值

我看到React.forwardRef从反应文档来看，似乎是将引用传递给子功能组件的认可方式：

const FancyButton = React.forwardRef((props, ref) => (
  <button ref={ref} className="FancyButton">
    {props.children}
  </button>
));

// You can now get a ref directly to the DOM button:
const ref = React.createRef();
<FancyButton ref={ref}>Click me!</FancyButton>;

但是，与简单地传递自定义 prop 相比，这样做有什么优势？：

const FancyButton = ({ innerRef }) => (
  <button ref={innerRef} className="FancyButton">
    {props.children}
  </button>
));

const ref = React.createRef();
<FancyButton innerRef={ref}>Click me!</FancyButton>;

我能想到的唯一优点可能是有一个一致的 refs api，但是还有其他优点吗？传递自定义 prop 是否会影响渲染时的差异并导致额外的渲染，当然不会因为 ref 以可变状态存储在current field?

举例来说，您想传递多个引用（老实说，可能表明代码味道，但仍然如此），那么我能看到的唯一解决方案是使用 customRef 道具。

我想我的问题是使用的价值是什么forwardRef在自定义道具上？

Even 反应文档 https://reactjs.org/docs/refs-and-the-dom.html#exposing-dom-refs-to-parent-components提及自定义 ref 属性作为更灵活的方法forwardRef:

如果您使用 React 16.2 或更低版本，或者如果您需要比引用转发提供的灵活性更高，您可以使用这种替代方法并显式传递ref 作为不同名称的 prop.

还有一个gist https://gist.github.com/gaearon/1a018a023347fe1c2476073330cc5509，其中丹·阿布拉莫夫 (Dan Abramov) 描述了它的优点：

• 兼容所有 React 版本
• 适用于类和函数组件
• 简化了将引用传递给多层嵌套组件的过程

我想补充一点，像往常一样传递 refs 不会导致重大变化 https://reactjs.org/docs/forwarding-refs.html#note-for-component-library-maintainers这是获得多个裁判的方法。唯一的优点是forwardRef我想到的是：

• DOM 节点、功能和类组件的统一访问 API（您提到过）
• refattribute 不会让你的 props API 膨胀，例如如果您使用 TypeScript 提供类型

传递自定义道具是否会影响渲染时的差异并导致额外的渲染？

如果您传递内联，引用可能会触发重新渲染回调参考 https://reactjs.org/docs/refs-and-the-dom.html#callback-refs功能向下作为道具。但这是一个更好的主意 https://reactjs.org/docs/refs-and-the-dom.html#caveats-with-callback-refs无论如何将其定义为类实例方法或通过一些记忆，如useCallback.