我看到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字段中吗?
current
假设您要传递多个ref(tbh,可能表示代码气味,但仍然),那么我能看到的唯一解决方案是使用customRef道具。
我想我的问题是,forwardRef在自定义道具上使用的价值是什么?
forwardRef
甚至React文档都将自定义ref prop称为一种更灵活的方法forwardRef:
如果您使用React 16.2或更低版本,或者您需要 比ref转发所提供的更多的灵活性 ,则可以使用此替代方法,并将 ref作为不同名称的prop 显式传递。
还有一个要点,Dan Abramov在其要旨中写道:
我要补充一点,作为普通道具传递裁判不会引起重大变化,这是获得多个裁判的方法。forwardRef我想到的唯一优点是:
ref
传递自定义道具会影响渲染时的差异并导致其他渲染吗?
如果将向下传递的内联回调ref函数作为prop 传递,则ref可能会触发重新渲染。但是无论如何最好将它定义为类实例方法或通过诸如之类的记忆来定义useCallback。
useCallback