掌握React中的ref特性，提升前端开发效率

前端

2023-10-16 13:10:19

在Web开发的早期，频繁的手动DOM操作是交互式网页的唯一实现方式。在此期间，jQuery作为一款方便的DOM操作库，在开发人员中享有盛誉。然而，随着React、Vue等前端框架的兴起，这种局面发生了改变。

这些框架引入了虚拟DOM的概念，极大地简化了DOM操作并提高了性能。React中的ref特性便是这一改进的体现之一。

什么是React ref？

ref是React中的一个特殊属性，它允许开发者直接访问DOM元素或类实例。通过ref，开发者可以对DOM元素进行直接操作或获取其状态，从而实现更细粒度的控制。

ref的使用场景

ref在React中有着广泛的应用场景，其中包括：

获取DOM元素： 通过ref可以获取DOM元素的引用，进而进行手动操作，例如聚焦、滚动或添加事件监听器。
与第三方库集成： 有些第三方库需要直接访问DOM元素才能正常工作，此时ref便可发挥作用，为这些库提供对DOM元素的访问权限。
性能优化： 合理使用ref可以优化组件性能。例如，可以通过ref避免不必要的重新渲染。

ref的类型

React提供了两种类型的ref：

字符串ref： 使用字符串作为ref值，将直接引用DOM元素本身。
回调ref： 使用回调函数作为ref值，在组件挂载或更新时被调用，并传入当前DOM元素或类实例作为参数。

ref的应用示例

以下是一个使用ref获取DOM元素并对其进行聚焦操作的示例：

import React, { useRef } from "react";

const MyComponent = () => {
  const inputRef = useRef(null);

  const focusInput = () => {
    if (inputRef.current) {
      inputRef.current.focus();
    }
  };

  return (
    <div>
      <input type="text" ref={inputRef} />
      <button onClick={focusInput}>Focus Input</button>
    </div>
  );
};

export default MyComponent;