反应中的 useRef() - Javascript

在React Hooks中，useRef是一个可以用于存储任何可变值的Hook。它与useState相似，但并不会触发组件重新渲染，并且可以存储任何类型的数据。

基本用法

使用useRef的最基本用法是在函数组件中声明一个ref变量：

import { useRef } from 'react';

function MyComponent() {
  const myRef = useRef(null);
  // ...
}

在这个示例中，我们使用useRef创建了一个名为myRef的变量，并将其初始值设置为null。这个ref可以随意存储数据。

访问DOM元素

使用useRef的一个很常见的用法是访问DOM元素：

import { useRef } from 'react';

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

  useEffect(() => {
    myRef.current.focus();
  }, []);

  return (
    <input type="text" ref={myRef} />
  );
}

在这个示例中，我们创建了一个input元素，并将它的引用存储在myRef变量中。我们然后使用useEffect来确保在组件更新后，在输入框中放置焦点。这是通过myRef.current.focus()完成的，myRef.current是input元素的实际DOM节点。

存储非prop数据

useRef的另一个常见用法是存储那些不应作为组件prop传递的数据，但又需要在组件之间共享的数据。例如，有一个通过context传递的值：

import { useRef, useContext } from 'react';

const MyContext = React.createContext();

function MyComponent() {
  const myRef = useRef(null);
  const myValue = useContext(MyContext);

  // ...

  return (
    <div ref={myRef}>{myValue}</div>
  );
}

在这个示例中，myRef存储一个指向组件中的div元素的引用，而myValue存储使用context来获取的共享值（例如登录状态或主题）。对这些非prop数据进行存储时，useRef是一个很好的选择。

总结

使用useRef可以方便地存储数据，并且可以用于访问DOM元素和存储非prop数据。它是一个十分实用的Hook，适用于各种不同的情境。