React useRef hook 笔记

在React中，ref是用来引用DOM元素或React组件的一个机制。这使得你可以直接操作DOM元素，或者与React组件进行交互。在函数组件和类组件中，ref都可以起到类似的作用。

React提供的useRef hook，它用于在函数组件中创建和使用ref。以下是它的主要用途和特点：

1. 创建ref：useRef可以创建一个可变的ref对象。通常，我们会将这个ref关联到组件中的某个DOM元素，这样就可以直接操作该元素。

2. 保持状态：useRef创建的ref对象在组件的整个生命周期内保持稳定，即使组件重新渲染，这个ref对象仍然保持相同。这使得它特别适用于存储跨渲染周期保持不变的数据。

3. 操作DOM：通过ref，你可以获取到DOM元素，然后执行各种操作，例如获取焦点、读取滚动位置、调整样式等。这在处理复杂的UI交互时很有用。

4. 引用组件：ref也可以用来引用子组件，这样就可以调用子组件上的方法或属性。这种情况下，你需要确保子组件是一个类组件或是使用forwardRef创建的组件。

举个简单的例子，使用useRef来获取一个<input>元素，并在组件加载后将焦点设置到这个输入框上：

import React, { useEffect, useRef } from 'react';

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

  useEffect(() => {
    if (inputRef.current) {
      inputRef.current.focus(); // 将焦点设置到输入框
    }
  }, []); // 空依赖数组，确保这个副作用只在组件加载后运行一次

  return (
    <input ref={inputRef} placeholder="Enter your name" />
  );
};

export default MyComponent;

在这个例子中，我们通过useRef创建了一个ref，然后在useEffect中使用它来操作DOM。在React的生态系统中，ref hook是一个非常有用的工具，用于处理需要直接操作DOM或保持状态的场景。