React Refs 使用场景及核心要点

在使用 React 进行开发过程中，或多或少使用过 Refs 进行 DOM 操作或者访问一些DOM上的API，又或使用 Refs 保存数据。不管怎么说 Refs 总是 React 提供的一大助力，这篇文章主要介绍 Refs 功能和使用场景以及注意事项。希望能增强对 Refs 的理解，掌握好这把利剑。

什么是 Refs？

Refs 是 React 提供的用来保存 object 引用的一个解决方案，在函数式组件使用 useRef 创建一个 ref 对象，ref 对象存在一个可直接修改的 current 属性，内容都是存在 current 上。Refs 使用场景主要分为两个方向，其一是实现 DOM 访问与操控、在两次render之间传递数据内容【和state机制有很大不同，下文会有对比介绍】。如果在组件返回的 jsx dom上绑定了 ref 属性，React 在处理 jsx 时会把该dom节点【原生node节点】的引用存储在 ref.current 上。

使用方式

分为三步：

• 第一步、使用 useRef 创建 ref 对象（useRef 是 FC hooks， class 组件使用 React.createRef() 创建 ）
• 第二步、赋值&使用【操作dom则绑定为dom的ref属性的值，用于保存值的时候传递内容给 ref.current】,
• 第三步、访问ref内容【进行dom对应的api访问，进行 scroll 、focus等操作。又或者从current中读取保存的数据】最终的目的还是最后访问拿到对应的数据进行操作。下边我们分别用两个小 demo 简单先看看用法，理论和总结在后边一点【熟悉Refs使用的直接跳转: 核心要点】。

Example one 实现点击按钮 focus input 框

import React, { useRef } from "react";

export default function Comp() {// 第一步：使用 useRef 创建一个 ref 对象 { current: null }const ref = useRef();function handleClick() {// 第三步：访问到 ref 上存的内容，这里是 input 的node节点ref.current.focus();}// 第二步：赋值 refreturn (<><input ref={ref} /><button onClick={handleClick}>开始输入</button></>);
}