React中使用useRef

介绍

useRef 是 React 提供的一个 Hook,用来在函数组件中创建一个可变的引用。

使用方法

import { useRef } from 'react';
 
function MyComponent() {
  const inputRef = useRef(null);
  
  const handleClick = () => {
    inputRef.current.focus();
  };
 
  return (
    <div>
      <input ref={inputRef} />
      <button onClick={handleClick}>Focus Input</button>
    </div>
  );
}

注意事项

  • 修改 current 属性不会引发组件重新渲染
  • 可以在函数组件中模拟实例变量的功能