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