理解 React 中的 Refs 和 DOM：访问和操作 DOM 元素

本篇文章给大家分享《理解 React 中的 Refs 和 DOM：访问和操作 DOM 元素》，覆盖了文章的常见基础知识，其实一个语言的全部知识点一篇文章是不可能说完的，但希望通过这些问题，让读者对自己的掌握程度有一定的认识(B 数)，从而弥补自己的不足，更好的掌握它。

react 中的 refs 和 dom：访问和操作 dom 元素

在 react 中，refs 用于直接访问 dom 元素 并与之交互。虽然 react 通常通过状态和 props 以声明式方式管理 dom，但有时您可能需要直接与 dom 交互，例如动画、表单字段焦点或测量元素尺寸。在这些情况下，refs 提供了一种访问底层 dom 节点的方法。

1. react 中的 refs 是什么？

a ref （reference 的缩写）是一个允许你引用 dom 元素或 react 组件实例的对象。可以在类组件中使用 react.createref() 或在函数组件中使用 useref() 创建 ref。参考文献通常用于：

• 直接访问 dom（例如，聚焦输入字段或获取表单元素的值）。
• 触发命令式动画或动作。
• 与需要直接 dom 操作的第三方库集成。

2.创建和使用参考

类组件：

在类组件中，引用是使用 react.createref() 创建的。然后，创建的 ref 通过 ref 属性附加到 dom 元素。

类组件中的引用示例：

import react, { component } from 'react';

class mycomponent extends component {
  constructor(props) {
    super(props);
    // create a ref to access the input element
    this.inputref = react.createref();
  }

  handlefocus = () => {
    // access the dom node directly and focus the input element
    this.inputref.current.focus();
  };

  render() {
    return (
      <div>
        <input ref={this.inputref} type="text" />
        <button onclick={this.handlefocus}>focus input</button>
      </div>
    );
  }
}

export default mycomponent;

在此示例中：

• this.inputref 是使用 react.createref() 创建的。
• ref 通过 ref 属性分配给 <input /> 元素。
• 在handlefocus方法中，我们通过this.inputref.current访问输入元素并调用focus()以编程方式聚焦输入字段。

在函数组件中：

在函数组件中，引用是使用 useref 钩子创建的。 useref 钩子允许您创建一个在重新渲染期间持续存在的可变引用对象。

函数组件中的引用示例：

import react, { useref } from 'react';

const mycomponent = () => {
  const inputref = useref();

  const handlefocus = () => {
    // access the dom node directly and focus the input element
    inputref.current.focus();
  };

  return (
    <div>
      <input ref={inputref} type="text" />
      <button onclick={handlefocus}>focus input</button>
    </div>
  );
};

export default mycomponent;

在此示例中：

• inputref 是使用 useref 钩子创建的。
• 使用 ref 属性将 ref 附加到 <input /> 元素。
• handlefocus 函数使用 inputref.current 访问输入元素，并调用 focus() 来聚焦输入字段。

3.参考用例

a.访问 dom 元素

refs 通常用于直接访问和操作 dom 元素。例如，可以使用 refs 轻松完成关注文本输入或测量元素的大小。

b.管理焦点

refs 允许您管理元素的焦点，例如在组件安装时或在执行特定操作后聚焦于输入字段。

使用参考文献管理焦点的示例：

import react, { useeffect, useref } from 'react';

const focusinput = () => {
  const inputref = useref();

  useeffect(() => {
    // focus the input when the component mounts
    inputref.current.focus();
  }, []);

  return <input ref={inputref} type="text" />;
};

export default focusinput;

在此示例中，由于 useeffect 挂钩和 ref，当组件安装时，输入会自动聚焦。

c.触发动画或与第三方库集成

refs 通常用于与第三方库交互或触发命令式动画。例如，您可以使用 ref 来控制自定义动画或与 jquery 等非 react 库交互。

d.表单验证

refs 还可以用于收集表单数据，而无需将数据存储在 react 的状态中，为不需要实时更新的表单提供了一个简单的替代方案。

4.管理多个元素的引用

使用多个元素时，您可以将引用存储在对象或数组中以访问每个元素。

多个元素的引用示例：

import React, { useRef } from 'react';

const MultipleRefs = () => {
  const inputRefs = [useRef(), useRef(), useRef()];

  const focusInput = (index) => {
    inputRefs[index].current.focus();
  };

  return (
    <div>
      <input ref={inputRefs[0]} type="text" />
      <input ref={inputRefs[1]} type="text" />
      <input ref={inputRefs[2]} type="text" />
      <button onClick={() => focusInput(1)}>Focus Second Input</button>
    </div>
  );
};

export default MultipleRefs;

在此示例中，使用引用数组管理多个输入元素，并使用按钮来聚焦第二个输入。

5. refs 与 state

refs 提供了一种与 dom 交互的方式，而 react 中的 state 用于管理影响 ui 渲染的数据。了解何时使用它们非常重要：

• 状态用于动态渲染：当数据发生变化并影响ui的渲染方式时，使用状态。
• refs 用于命令式操作：当您需要直接与 dom 元素交互（例如，聚焦、测量或触发动画）时，请使用 refs。

6.结论

react 中的 refs 是直接访问和操作 dom 元素的强大功能。它们提供了与 ui 交互的命令式方式，支持聚焦输入字段、触发动画或与第三方库集成等操作。

虽然 react 鼓励使用状态和 props 的声明式方法，但当您需要与 dom 进行更直接的交互时，refs 是一个重要的工具。

理论要掌握，实操不能落！以上关于《理解 React 中的 Refs 和 DOM：访问和操作 DOM 元素》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！