16、React 中的 Ref 与自定义 Hook 全解析

React 中的 Ref 与自定义 Hook 全解析

一、React Ref 详解

1. Ref 基础概念
   • React ref 是一个用于保存持久值的容器，通常可将其值作为无更新能力的原始状态使用。
   • 比如，当你想要获取当前值但对新的更新不感兴趣时，可将其视为一种特殊的状态访问方式。
2. useRef 钩子
   • useRef 钩子可在函数组件中创建 ref。创建后，它能在组件的生命周期内作为持久容器使用。
   • 例如在输入框聚焦示例中，就可以使用 useRef 来实现。以下是一个简单示例：

import React, { useRef } from 'react';

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

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

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={handleFocus}>聚焦输入框</button>
    </div>
  );
};