提升你的React技术：React useRef & useRef的终极指南

2024-01-03 09:49:28

在React的世界里，ref是一个极具价值的工具，它可以让你与DOM元素直接交互。无论你是React新手还是经验丰富的开发者，掌握ref都将使你的React应用更上一层楼。本文将带你探索ref的神奇世界，从概念入门到深入实践，让你轻松掌控ref的奥秘。

什么是ref？

ref，即reference的缩写，在React中扮演着桥梁的角色，它可以将你的组件与DOM元素连接起来。有了ref，你便可以访问并操作DOM元素，比如获取元素的尺寸、位置、文本内容等。ref的使用十分灵活，既可用于获取单个元素，亦可用于获取一组元素。

useRef()钩子

React.useRef()钩子是创建ref的最常见方法之一。它接收一个参数，即ref的初始值，并返回一个ref对象。这个ref对象具有一个特殊的属性current，它指向DOM元素。

const ref = React.useRef(null);

使用ref

使用ref的场景非常广泛，以下是一些常见用法：

获取DOM元素的尺寸、位置等信息：

const ref = React.useRef(null);

useEffect(() => {
  if (ref.current) {
    const width = ref.current.offsetWidth;
    const height = ref.current.offsetHeight;
  }
}, [ref]);

操作DOM元素：

const ref = React.useRef(null);

const handleClick = () => {
  if (ref.current) {
    ref.current.focus();
  }
};

创建受控组件：

const ref = React.useRef(null);

const handleChange = (e) => {
  if (ref.current) {
    ref.current.value = e.target.value;
  }
};

useRef()与回调函数

在某些情况下，你需要在组件挂载或更新后立即访问DOM元素。这时，你可以使用回调函数。

const MyComponent = () => {
  const ref = React.useRef(null);

  useEffect(() => {
    if (ref.current) {
      // 在组件挂载后立即执行
    }
  }, []);

  useEffect(() => {
    if (ref.current) {
      // 在组件更新后立即执行
    }
  }, [props]);

  return <div ref={ref} />;
};