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 将 ref 附加或分离到 DOM 节点时运行一些代码，您可能需要改用回调 ref 。

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