React中useRef的使用

在 React 中，useRef 是一个钩子，用于返回一个可变的 ref 对象，其 .current 属性被初始化为传递的参数（initialValue）。这个返回的对象在组件的整个生命周期内保持不变。useRef 可以用来直接访问 DOM 元素或存储任何不会引起重新渲染的可变值。

以下是如何使用 useRef 访问 DOM 元素的示例：

示例：使用 useRef 访问 DOM 元素

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

function MyComponent() {
  const myDivRef = useRef(null);

  useEffect(() => {
    // 访问 DOM 元素
    if (myDivRef.current) {
      myDivRef.current.style.backgroundColor = 'lightblue';
    }
  }, []);

  return (
    <div ref={myDivRef}>
      这个 div 的背景颜色是通过 useRef 设置的。
    </div>
  );
}

export default MyComponent;

在这个例子中：

1. 创建 Ref：const myDivRef = useRef(null); 创建一个初始值为 null 的 ref 对象。
2. 附加 Ref：ref={myDivRef} 属性将 ref 附加到 <div> 元素上。
3. 使用 Ref：在 useEffect 钩子中，myDivRef.current 允许你访问 div DOM 元素，从而可以直接操作它。

示例：使用 useRef 存储可变值

import React, { useRef } from 'react';

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

  const handleClick = () => {
    countRef.current += 1;
    console.log(`计数值现在是: ${countRef.current}`);
  };

  return (
    <div>
      <button onClick={handleClick}>增加计数</button>
    </div>
  );
}

export default Counter;

在这个例子中：

1. 创建 Ref：const countRef = useRef(0); 创建一个初始值为 0 的 ref 对象。
2. 更新 Ref：handleClick 函数更新 countRef.current 而不会引起重新渲染。

关键点

• 持久性：ref 对象在重新渲染之间保持持久。
• 无重新渲染：更新 ref 对象的 .current 属性不会引起组件重新渲染。
• DOM 访问：useRef 通常用于直接访问和操作 DOM 元素。

以上例子展示了如何在 React 中基本使用 useRef 来访问 DOM 元素和存储可变值。