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 属性分配给 元素。
- 在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 附加到 元素。
- 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 是一个重要的工具。
