如果我们可以简单地在 props 中传递创建的 ref ，为什么我们需要 ReactforwardRef 呢？

Question

根据 React 文档，将 ref 传递给子组件的正确方法如下：

import React from 'react';

const Input = React.forwardRef((props, ref) => {
  React.useEffect(() => {
    ref.current.focus();
  }, []);
  return <input type="text" ref={ref} />;
});

export default function App() {
  const inputRef = React.createRef();
  return (
    <div>
      <Input ref={inputRef} />
    </div>
  );
}

但是，如果我尝试将创建的 ref 作为普通 prop 以任何其他名称（然后是“ref”）传递，这也会按预期工作。

import React from 'react';

const Input = (props) => {
  React.useEffect(() => {
    props.inputRef.current.focus();
  }, []);
  return <input type="text" ref={props.inputRef} />;
};

export default function App() {
  const inputRef = React.createRef();
  return (
    <div>
      <Input inputRef={inputRef} />
    </div>
  );
}

所以问题是，forwardRef 是否做了一些我们用普通 props 无法实现的特殊事情？

Answer 1

forwardRef根据官方文档，没有必要使用。

引用转发是一种自动将引用通过组件传递给其子组件的技术。对于应用程序中的大多数组件来说，这通常是不必要的。但是，它对于某些类型的组件很有用，特别是在可重用组件库中。最常见的场景如下所述。

您可以通过传递ref另一个道具名称（例如divRef. ref但是如果你将 ref 作为prop传递，那么React will not allow that就不会将 ref 与 DOM 元素关联起来，并且会显示警告

如果你想让你的元素像其他元素一样自然并ref使用refprop 关键字引用它们，那么它是强制性的forwardRef，否则不是。