React.createRef 和 React.useRef 之间的区别?

Question

我是使用 React Hook refs 的新手。我遵循了几个代码示例，所有这些示例都引用了useRef但代码根本不起作用。 然而，当我将其更改为createRef时，它运行良好。 因此，我很好奇这两个函数之间的区别是什么？

// Near the top of my component
let companyNameRef = React.createRef();
// A useEffect added simply to give focus to a particular input element the first time the component is loaded
useEffect(() => {
if (companyNameRef.current) {
companyNameRef.current.focus();
}
}, [companyNameRef]);
// Within the input element
<Form.Control name='companyName' 
as='input'
onChange={e => handleChange(e)}
ref={companyNameRef}
/>

如果我将createRef()更改为useRef()或useRef(null)或useRef('')初始焦点功能将停止工作。

有谁知道为什么？

Answer 1

createRef

用于React 类组件中捕获 DOM 句柄。
useRef用于 React 函数组件中，不仅用于捕获 DOM 句柄，还用作模拟类组件中的类成员变量的持久存储。

在您的代码中(我认为属于React.FunctionComponent(尝试设置let companyNameRef = useRef(null);并提供一个空数组，例如[]将useEffect作为第二个参数，以确保仅针对初始呈现调用它。

Answer 2

有关createRef和useRef之间区别的详细说明，请参阅"useRef"和"createRef"之间有什么区别？

切换到useRef时它在代码中停止工作的原因是

请记住，useRef 在其内容更改时不会通知您。 更改 .current 属性不会导致重新呈现。如果需要帮助， 当 React 将引用附加或分离到 DOM 节点时运行一些代码， 您可能希望改用回调引用。

https://reactjs.org/docs/hooks-reference.html#useref