在 React.js 中巧妙运用 React.useRef() 钩子

前端

2024-02-06 11:28:56

React.useRef() 钩子简介

在 React.js 中，useRef 钩子是一个内置钩子，允许我们与常规的类组件生命周期的 this.refs 属性进行交互。它允许我们在组件实例中存储值，即使在重新渲染期间也能访问这些值。

类比：一个装满宝藏的盒子

将 useRef 钩子可视化为一个特殊盒子，你可以在里面存放宝藏（即数据或引用）以供以后使用。就像一个物理盒子有其唯一且不变的引用，useRef 返回的对象也有一个 .value 属性，它指向存储在其中的值。

何时使用 `useRef` 钩子？

有几种常见场景需要使用 useRef 钩子：

访问非受控组件： 当使用库组件或原生HTML组件时，你可能需要访问它们的引用来进行交互或调用方法。
动画： 用于存储动画帧ID或测量组件尺寸等与动画相关的详细信息。
表单管理： 跟踪未受控表单控件（例如，文本或选择框）中的值。
优化： 避免在每次重新渲染期间重新生成繁重计算或调用昂贵的方法。

使用 `useRef` 钩子的最佳实战

初始化 ref 变量：
```
const myRef = React.useRef();
```
将 ref 链接到组件或特定标记：
```
<input type="text" ref={myRef} />
```

在组件内访问 ref：

console.log(myRef.value); // 访问组件或标记实例

实际运用：一个交互式计数器

考虑一个带有“加一”按钮的计数器组件。以下是使用 useRef 钩子管理内部计数的示例：

import React, { useState, useEffect } from 'react';

export const UseRefExample = () => {
  const [count, setCount] = useState(0);
  const countRef = React.useRef();

  // 每次重新渲染后，将 ref 与组件实例关联
  // 确保在组件初始化后只运行该副作用
  // ref 仅在组件挂载和卸载期间需要
  // 这样做可以防止内存泄漏
  
  const counterRef = React.useCallback(() => {
    countRef.value = count;
  }, [count]);

  // 侦听“加一”按钮的单击
  const increment = () => {
    if (countRef.value) {
      setCount(countRef.value + 1);
    }
  };
  
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Add One</button>
    </div>
  );
};