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