深入浅出：useRef案例实战教程 - React初学者必看

useRef案例贯穿于React开发实践，展示如何利用useRef hook实现DOM元素管理、状态保存、输入表单默认值设定与DOM元素可见性控制，为开发者提供灵活的组件交互方式，增强应用的动态性和用户交互体验。

在React中，useRef是一个内置的Hook，用于创建一个与初始值无关的可变引用对象。这个引用对象可以存储任何JavaScript对象，包括DOM元素的引用、函数或者变量。useRef返回的引用对象具有一个current属性，该属性的值在组件的整个生命周期中保持不变。

import React, { useRef } from 'react';

function App() {
  const myRef = useRef(null);

  return (
    <div>
      <input ref={myRef} type="text" />
      <button onClick={() => myRef.current.focus()}>Focus input</button>
    </div>
  );
}

export default App;

在这个示例中，我们创建了一个myRef引用对象，并将其与input元素相连。通过onClick事件处理器，我们调用myRef.current.focus()来将焦点设置到输入框上，实现了与ref对象的交互。

import React, { useRef } from 'react';

function Greeting() {
  const greetingRef = useRef(null);

  const changeGreeting = () => {
    greetingRef.current.textContent = 'Goodbye, World!';
  };

  return (
    <>
      <button onClick={changeGreeting}>Change Greeting</button>
      <div ref={greetingRef}>Hello, World!</div>
    </>
  );
}

export default Greeting;

在这个示例中，我们创建了一个greetingRef引用对象，并将其与一个div元素关联。通过onClick事件处理器，我们调用changeGreeting函数，改变div元素的文本内容，实现了与引用对象的直接操作。

import React, { useRef } from 'react';

function Counter() {
  const counterRef = useRef(0);

  return (
    <>
      <button onClick={() => counterRef.current++}>Increment</button>
      <p>Count: {counterRef.current}</p>
    </>
  );
}

export default Counter;

在这个示例中，我们使用useRef创建了一个名为counterRef的引用对象，并将其current属性初始化为0。通过这个ref对象，我们可以直接访问并在组件生命周期外保存一个初始值，实现组件状态的保存。

import React, { useRef } from 'react';

function FormInput() {
  const inputRef = useRef('');

  return (
    <div>
      <input ref={inputRef} type="text" />
      <p>Current value: {inputRef.current}</p>
    </div>
  );
}

export default FormInput;

在这个示例中，我们使用useRef创建了一个inputRef引用对象，并将其初始值设置为空字符串。通过ref属性将输入框与inputRef关联，我们可以获取和设置输入框的值，实现输入表单的默认值设定。

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

function ToggleVisibility() {
  const [visible, setVisible] = useState(false);
  const targetRef = useRef(null);

  const toggleVisibility = () => {
    setVisible(!visible);
  };

  return (
    <div>
      <button onClick={toggleVisibility}>Toggle visibility</button>
      <div ref={targetRef} style={{ display: visible ? 'block' : 'none' }}>
        This text is toggled
      </div>
    </div>
  );
}

export default ToggleVisibility;

在这个示例中，我们首先使用useState创建了一个visible状态变量，用于控制div元素的可见性。然后，我们使用useRef创建了一个名为targetRef的引用对象，并将其与div元素关联。通过设置div元素的style属性，我们可以根据visible状态变量动态地显示或隐藏元素。

通过上述案例，我们可以看到useRef在React应用中提供了许多实用的功能，从简单地存储DOM元素引用到管理组件的初始状态、控制表单输入，以及实现更复杂的动态DOM操作。这些功能使得React应用程序的交互性和动态性得到了显著提升。