使用 React.forwardRef 与自定义 ref prop 的值
我看到这似乎是从 react 文档中将 ref 传递给子函数组件的受制裁方式: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>;
但是,与简单地传递自定义道具相比,这样做有什么好处呢?
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
例如,假设你想传递多个引用(tbh,可能表示代码有异味,但仍然如此),那么我能看到的唯一解决方案是使用customRef props。
我想我的问题是使用自定义道具的价值是什么?forwardRef