React之useRef：揭秘其实用性

2023-01-23 16:48:12

useRef：轻松处理 React 状态和DOM 操作

1. useRef 的基本使用：存储不变的引用

useRef() 是一个实用的 React Hook，可让你存储变量，使其在组件重新渲染后仍能保持不变。这非常适合存储不需要跟随组件状态变化的数据，例如：

const nameRef = useRef();

const handleClick = () => {
  console.log(nameRef.current.value);
};

return (
  <div>
    <input ref={nameRef} />
    <button onClick={handleClick}>获取名字</button>
  </div>
);

上面代码使用 useRef() 创建了一个引用指向输入元素，当点击按钮时，它会获取并打印元素的值。

2. useRef 和 useEffect 的强大组合：动态 DOM 操作

将 useRef() 与 useEffect() 结合使用，你可以轻松操作 DOM 元素。以下示例演示如何使用 useRef() 存储对 DOM 元素的引用，并在 useEffect() 中添加和删除事件监听器：

const ref = useRef(null);

useEffect(() => {
  const element = ref.current;

  const handleClick = (event) => {
    console.log(event.target.value);
  };

  element.addEventListener('click', handleClick);

  return () => {
    element.removeEventListener('click', handleClick);
  };
}, []);

3. useRef 和状态管理：轻量级状态处理

useRef() 也可用于管理组件状态。它可以存储变量，并在需要时进行更新。这对于不需要随组件重新渲染而改变的状态非常有用：

const countRef = useRef(0);

const handleClick = () => {
  countRef.current++;
  console.log(countRef.current);
};

return (
  <div>
    <button onClick={handleClick}>点击</button>
  </div>
);