useRef实例

useRef实例：

import React, { useRef } from 'react';

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

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

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

这里创建了一个函数组件Example，其中使用了useRef来创建一个输入框的引用inputRef。然后在按钮的点击事件中，调用inputRef.current.focus()方法来将输入框聚焦。

在组件渲染时，useRef会返回一个可变的引用对象，它包含一个.current属性，可以用于存储任何可变的值。在上面的例子中，inputRef.current表示当前输入框的DOM元素，通过调用其.focus()方法来将其聚焦。

useRef通常用于管理React组件中需要持久化的状态，并且不希望每次渲染都被重置。例如，记录组件之间共享的信息、保存定时器ID、缓存计算结果等。除了.current属性外，useRef还提供了一些其他API，如.toString()、.valueOf()等，可以方便地操作引用对象的值和类型。

需要注意的是，useRef并不会触发组件重新渲染，因此在修改其.current属性时，不会导致组件进行更新。如果需要在改变状态后重新渲染组件，则应该使用useState或useEffect来管理状态。