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

  • Z时代
  • 2024-01-10
  • 分类：问答

我看到React.forwardRef似乎是从react docs传递ref到子功能组件的批准方法：

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>;

但是，与仅通过自定义道具相比，这样做的好处是什么？：

const FancyButton = ({ innerRef }) => (
  <button ref={innerRef} className="FancyButton">
    {props.children}
  </button>
));
const ref = React.createRef();
<FancyButton innerRef={ref}>Click me!</FancyButton>;

我能想到的唯一优势可能是为引用提供了一致的api，但是还有其他优势吗？传递自定义道具是否会影响渲染时的差异并引起其他渲染，当然不会将ref作为可变状态存储在current字段中吗？

假设您要传递多个ref（tbh，可能表示代码气味，但仍然），那么我能看到的唯一解决方案是使用customRef道具。

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

回答：

甚至React文档都将自定义ref prop称为一种更灵活的方法forwardRef：

如果您使用React 16.2或更低版本，或者您需要 ，则可以使用此替代方法，并将

显式传递。

还有一个要点，Dan

Abramov在其要旨中写道：

  • 与所有React版本兼容

  • 适用于类和功能组件

  • 简化了将ref传递到多层深的嵌套组件的过程

我要补充一点，作为普通道具传递裁判不会引起重大变化，这是获得多个裁判的方法。forwardRef我想到的唯一优点是：

  • DOM节点，功能和类组件的统一访问API（您提到过）

  • ref 属性不会使您的props API膨胀，例如，如果您使用TypeScript提供类型

传递自定义道具会影响渲染时的差异并导致其他渲染吗？

如果将向下传递的内联回调ref函数作为prop 传递，则ref可能会触发重新渲染。但是无论如何最好将它定义为类实例方法或通过诸如之类的记忆来定义useCallback。

以上是 使用React.forwardRef与自定义ref属性的价值 的全部内容， 来源链接： utcz.com/qa/434053.html

回到顶部