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


13

我看到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在自定义道具上使用的价值是什么?

Answers:


3

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

如果您使用React 16.2或更低版本,或者您需要比ref转发所提供的更大的灵活性,则可以使用此替代方法并将ref作为不同名称的prop显式传递。

还有一个要点,Dan Abramov在其要旨中写道:

  • 与所有React版本兼容
  • 适用于类和功能组件
  • 简化了将ref传递到多层深的嵌套组件的过程

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

  • DOM节点,功能和类组件的统一访问API(您提到过)
  • ref 属性不会使您的props API膨胀,例如,如果您使用TypeScript提供类型

通过自定义道具会影响渲染时的差异并导致其他渲染吗?

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


1
非常感谢福特,我有点想这可能只是想让它发光一点。
Lesbaa

0

RefReact组件中的标准属性。

一些包装其他组件以提供其他功能的组件,这些组件用于ref引用包装的组件并期望该组件具有ref属性。

组件最好具有ref与其他组件和库兼容的属性。

功能组件不能具有“ ref”属性,而必须使用它forwardRef来提供ref属性。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.