React.createRef 和 React.useRef 的区别？答案

【问题标题】：Difference between React.createRef and React.useRef?React.createRef 和 React.useRef 的区别？
【发布时间】：2020-01-16 20:58:06
【问题描述】：

我是使用 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('')，则初始焦点功能将停止工作。

有人知道为什么吗？

【问题讨论】：

尝试向useEffect提供空的依赖数组。
两者都为我工作
stackoverflow.com/questions/54620698/…
What's the difference between `useRef` and `createRef`?的可能重复

标签： javascript reactjs react-hooks

【解决方案1】：

createRef 旨在用于 React 类组件中以捕获 DOM 句柄。
useRef 旨在用于 React 函数组件中，不仅用于捕获 DOM 句柄，还用作模拟类组件中的类成员变量。

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

【讨论】：

刚刚尝试了您所说的，但它破坏了专注于启动的功能。尝试了所有 4 种组合，唯一有效的是 createRef 和 companyNameRef 作为依赖项。注意：useEffect 顶部的 console.log 证明 companyNameRef.current 在一段时间内是 null 直到不是。这就是为什么 [] 作为依赖项不起作用的原因。附言我的组件确实是一个函数组件：`const AddCustomer = () => { ... };
@robertwerner-goodyear 我的答案是已知的标准 React 配方。如果不是，那么它一定是特定于您使用的表单的问题。有几种流行的形式，你没有指出你使用哪一种。代码as='input'建议semantic-ui形式，看看here
有趣。仅供参考，我正在使用 React Bootstrap 表单。无论如何，我非常感谢您的反馈和有用的提示。值得庆幸的是，我确实有一种简单的方法可以让光标在页面加载时出现在最上面的输入元素中。它似乎不适用于“标准”方法，这很有趣，但不会破坏交易。

【解决方案2】：

createRef和useRef之间的区别的详细解释见What's the difference between `useRef` and `createRef`?

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

请记住，useRef 不会在其内容更改时通知您。改变 .current 属性不会导致重新渲染。如果你想当 React 将 ref 附加或分离到 DOM 节点时运行一些代码，您可能想改用callback ref。

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

【讨论】：