解密 ref：操控 DOM 的强大秘钥（第 1 部分：使用 ref 访问 DOM 节点）

2023-11-05 01:01:35

导言：

在 React 的世界中，ref（引用）是一个强大的工具，它赋予了我们直接访问由 React 管理的 DOM 节点的神奇能力。通过利用 ref，我们可以突破 React 组件的封装限制，与底层 DOM 进行交互，执行各种动态操作。在这个系列文章的第一部分中，我们将深入探讨如何使用 ref 访问 DOM 节点，为我们开启一个全新的可能性世界。

认识 ref：

ref 是 React 中的一个属性，它允许我们为 DOM 元素创建一个引用。我们可以通过在 JSX 中使用 ref 属性来实现，如下所示：

const myRef = useRef(null);

在这里，myRef 是一个 React 引用对象，它最初被初始化为 null。当组件挂载时，React 会自动将 DOM 节点的引用分配给 myRef.current，从而为我们提供了一个指向该 DOM 元素的直接通道。

使用 ref 访问 DOM 节点：

一旦我们创建了 DOM 节点的引用，就可以使用 myRef.current 属性访问它。这为我们提供了对该元素的直接操作权限，我们可以对其进行各种操作，例如：

获取元素的属性和值
更改元素的样式
监听元素的事件
甚至修改元素的子元素

使用 useRef 钩子：

在函数式组件中，可以使用 useRef 钩子来创建和管理 ref。useRef 返回一个可变 ref 对象，它的 .current 属性最初为 null。我们可以使用此钩子来创建和管理 DOM 节点的引用，如下所示：

const myRef = useRef();

案例：

为了展示 ref 的实际应用，让我们考虑一个简单的示例。我们想创建一个按钮，当单击时，它会更改其相邻段落的文本。我们可以使用 ref 来获取按钮和段落的 DOM 节点，并使用它们来动态更新文本：

const App = () => {
  const buttonRef = useRef();
  const paragraphRef = useRef();

  const handleClick = () => {
    paragraphRef.current.textContent = '新文本！';
  };

  return (
    <>
      <button ref={buttonRef} onClick={handleClick}>更新文本</button>
      <p ref={paragraphRef}>初始文本</p>
    </>
  );
};