React--useRef

useRef

useRef 是 React 中的一个 Hook，用于获取持久化引用。它可以用于在函数组件中存储和访问 DOM 元素或其他需要在多次渲染之间保持一致的值。

语法：

const refContainer = useRef(initialValue);
 

其中，initialValue 是初始值，可以是任意类型的数据。

使用 useRef 的步骤如下：

1. 在函数组件中调用 useRef，并传入初始值。初始值可以是任意类型的数据，如字符串、数字、对象等。
2. useRef 会返回一个可变的 ref 对象。这个 ref 对象的 current 属性指向传入的初始值。
3. 在组件中，可以通过 refContainer.current 来访问和修改 ref 的值。

使用场景：

用于在函数组件中存储和访问 DOM 元素或其他需要在多次渲染之间保持一致的值。

demo

import React, { useRef } from 'react';

function MyComponent() {
  const inputRef = useRef(null);

  const handleClick = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={handleClick}>Focus Input</button>
    </div>
  );
}

在上述代码中，我们创建了一个名为 inputRef 的 ref 对象，并将其赋值给 <input> 元素的 ref 属性。然后，当按钮被点击时，我们通过 inputRef.current.focus() 来聚焦输入框。通过 useRef，我们可以在多次渲染之间保持对同一个 DOM 元素的引用，并对其进行操作，而不需要使用类组件的实例属性。

注：除了存储 DOM 元素的引用，useRef 还可以用于存储任意的值，并在多次渲染之间保持一致。这对于保存组件内部状态或其它需要在渲染周期中保持一致的值非常有用。

Good Luck !